Pull to refresh
0
@Stas35read⁠-⁠only

User

Send message

Забудьте про div, семантика спасёт интернет

Reading time6 min
Reach and readers136K

Давным-давно (лет пятнадцать назад) почти все делали сайты и не переживали о том, что под капотом. Верстали таблицами, использовали всё, что попадётся под руку (а попадались в основном <div> и <span>) и не особо заморачивались о доступности. А потом случился HTML5 и понеслось.

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

Дисклеймер: статья может обидеть тех, кто прикипел к вёрстке дивами. Но <div> — не приговор, и мы не призываем от него целиком отказываться. Ну и всегда можно договориться.

Читать далее

Обходим CSP nonce через дисковый кеш браузера

Level of difficultyMedium
Reading time16 min
Reach and readers3.4K

Эта статья описывает изощренную технику обхода Content Security Policy (CSP) на основе nonce-значений через эксплуатацию механизмов кеширования браузера. Автор демонстрирует, как комбинация CSS-инъекций, CSRF-атак и особенностей работы bfcache и дискового кеша может привести к выполнению произвольного JavaScript-кода даже при наличии строгой CSP.

Читать далее

Магия ZeroTier: Создаем личную VPN-сеть для дома и облака за 20 минут

Level of difficultyMedium
Reading time9 min
Reach and readers121K

Привет, Хабр!

Помните времена, когда «белый» IP-адрес был нормой, а не платной услугой? Когда для доступа к своему серверу хватало простого ssh user@ip_address? Я тоже помню. Но эта эпоха незаметно уходит.

Сегодня мы оказались в новой реальности. Ваша домашняя «Малинка» задыхается за провайдерским NAT, а облачный VPS в Европе кажется далеким и изолированным островом. Как получить доступ к первой или второй?

Эта статья — не очередной гайд по VLESS или Shadowsocks для обхода сложных блокировок. Это не "серебряная пуля" против DPI. Это честный гайд по постройке вашей личной, плоской и безопасной L2-сети поверх хаоса современного интернета. Мы соберем VPN-хаб, который не боится NAT, независимо от того, где он будет жить — на скромной «Малинке» дома или на арендованном VPS в другой стране. Мы разберем весь процесс по шагам, от регистрации до настройки полного туннеля, и честно поговорим о компромиссах этого решения.

Читать далее

NAT — как наследие старого интернета мешает будущему

Reading time9 min
Reach and readers99K

Поставили новый роутер, запустили онлайн-игру или развернули облачный сервер — и снова натыкаетесь на «двойной NAT», бесконечный порт-форвардинг и вместо своего IP видите чей-то 203.0.113.45. Причем железо и провайдеры уже готовы к IPv6, а мы все еще буксуем в прошлом.

Давайте посмотрим, почему наследие старого интернета — повсеместный NAT — тормозит нашу сетевую эволюцию и что с этим можно сделать. Детали под катом.
Читать дальше →

Кастомный подход для нормализации и сброса стилей (custom-reset.css)

Reading time9 min
Reach and readers30K


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

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

Надеюсь вы подчеркнете для себя что-то полезное, здесь вы можете ознакомиться с ним.
custom-reset.css
Читать дальше →

Организация отступов в верстке (margin/padding)

Reading time4 min
Reach and readers198K


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

Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.
Читать дальше →

Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Как скрыть элемент доступно?»

Level of difficultyMedium
Reading time6 min
Reach and readers15K


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


Сегодня я отвечу на следующий вопрос: «Как скрыть элемент с помощью CSS доступно?»

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

«Фантазии» уносят реальные жизни

Level of difficultyEasy
Reading time10 min
Reach and readers24K

По моему мнению, многие согласятся, что последние несколько лет стали свидетельством безумия, охватившего основную часть человечества, независимо от его социального статуса: от элит до низов. Можно списать все на то, что человек просто животное, движимое эмоциями и когнитивными искажениями. Однако я убежден, что во многом это можно исправить, если обратить внимание на такое явление, как дуализм восприятия, или, другими словами, иллюзию "внутреннего Я".

Читать далее

Выгорание. Ответственность. Well-being

Level of difficultyEasy
Reading time9 min
Reach and readers4.9K

Привет, Хабр! Меня зовут Даниэла, я руковожу направлением корпоративных льгот в Росбанке. В этом посте я расскажу, что такое выгорание, как оно проходит, как уберечь себя от выгорания, отслеживать его у сотрудников и, наконец, что мы для этого делаем в компании.

Читать далее

Проблема воспроизведения видео и его адаптация под iPhone и iPad. HTML5

Level of difficultyMedium
Reading time7 min
Reach and readers10K

Недавно, в процессе реализации одного из модулей проекта, над которым я работаю — возникла проблема воспроизведения видео на web странице, а также возникли проблемы с его адаптацией под iPhone и iPad.

Проблема была в следующем:

Создал веб‑страницу HTML5, на которой есть небольшое видео, создал свою control‑panel для плейера, и все отлично работает в Chrome и FireFox, но совсем не работает ни на iPhone, ни на iPad. Получаю просто пустую страницу.

Читать далее

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

Level of difficultyMedium
Reading time11 min
Reach and readers30K

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

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


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

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

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

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

Девять дней в тишине, или Зачем айтишнику випассана

Reading time8 min
Reach and readers43K

Многие знают про випассану только то, что там нужно молчать. Но не разговаривать девять дней — это вовсе не самое трудное. Да и подъёмы в четыре утра тоже. Куда сложней сконцентрировать ум на ощущениях в теле и разобраться, как же я на самом деле хочу действовать в той или иной ситуации. 

За последние четыре года я пять раз был на 10-дневном курсе випассаны. Еще три раза ездил служить (что это такое, объясню позже). В этом тексте я рассказываю о випассане и о том, как она может помочь в работе и в жизни.

Читать далее

Information

Rating
Does not participate
Location
Сочи, Краснодарский край, Россия
Date of birth
Registered
Activity

Specialization

Фулстек разработчик, Разработчик приложений
From 250,000 ₽
HTML
CSS
JavaScript
Python