Возможно, что эти HTML- и CSS-ошибки есть в вашем коде

Казалось бы, основные грабли веб-верстки давно известны, но ловушки ждут в деталях — от неожиданных эффектов font-size в rem и px до проблем с outline и адаптацией стилей к accessibility.

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

https://habr.com/ru/companies/ruvds/articles/928018/

Я вот не задумывался о некоторых нюансах, описанных в статье. А вы?

#фронтенд #css #html

Replicube: головоломка с блоками для программистов

Любите головоломки и код? Replicube — отличная возможность совместить оба удовольствия. Это пазл‑игра на программирование: перед вами 3D-фигура из вокселей, и ваша задача — воссоздать её с помощью кода. Чем точнее, тем лучше. Хотя код и пишется на Lua, но благодаря простому синтаксису и работе с базовыми возможностями языка — освоить его сможет разработчик, использующий и другие ЯПы.

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

Демоверсия доступна прямо в браузере — попробуйте, даже без установки.

#lua #геймификация

Что такое @scope в CSS #простымисловами

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

Простой пример

Допустим, у вас есть два блока с одинаковыми заголовками:

<section class="blog">
  <h2>Заголовок блога</h2>
</section>

<section class="sidebar">
  <h2>Заголовок сайдбара</h2>
</section>

Раньше вам приходилось писать селекторы вроде .blog h2 { ... }, чтобы не затронуть другие заголовки. С @scope можно сделать это аккуратнее:

@scope (.blog) {
  h2 {
    color: darkblue;
  }
}

Теперь стиль применяется только к заголовкам внутри .blog, и не влияет на другие h2 на странице.

Зачем это нужно?

— Уменьшает конфликт между стилями разных компонентов.
— Упрощает переиспользование компонентов — один блок не «ломает» другой.
— Делает CSS более предсказуемым и читаемым.

### Что важно знать

— @scope сейчас поддерживается не во всех браузерах, но его уже можно попробовать в Chrome (начиная с версии 117) и некоторых других.
— Это не замена классическим селекторам, а дополнительный инструмент для ограничения области действия стилей.

#css #фронтенд

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

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

Если вы задумываетесь о том, чтобы вывести знания на совсем другой уровень, то прочитайте нашу статью. В ней мы рассказали, как устроена магистратура по инженерии данных в Нетологии и НИУ ВШЭ, какие возможности она дает, что студенты получат после выпуска и как подготовиться к поступлению, если хотите попасть в этом году.

#datascience #карьера

Скелетон: как сделать загрузку визуально приятной

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

Я нашёл для вас гайд, как сверстать такой скелетон для карточки статьи за несколько минут. Демонстрируется HTML-код и CSS-стили с переменными, чтобы сразу получать плавную анимацию и адаптивную структуру без кучи лишнего кода.

#css #фронтенд #ux

Этот код может посоперничать с запуском Android Studio

Как работают кодировки

То, как хранится строка в памяти определяется её кодировкой. Сегодня чаще всего можно встретить UTF-8, но есть и множество других вариантов. Что такое кодировки и стандарты, как это выглядит в памяти, как происходит кодирование символов и почему их так много — узнаете в этом видео.

#видео

Школьник сделал игру в Roblox за 3 дня и поднял миллиард денег

16-летний разработчик сделал Grow a Garden — простенький фермерский симулятор, где можно растить огород, ухаживать за скотом и обмениваться товаром с другими игроками. Пиковый онлайн составил 21.6 млн игроков. Это примерно столько же, сколько сейчас в сети игроков Steam.

Как дела на заводе, коллеги?

#новости

Будущее Python: что ждёт язык и сообщество в ближайшие годы

Недавно закончилась двухдневная конференция PyCon 2025. В ней приняли участие более 700 участников 20+ докладчиков со своими докладами, мастер‑классами и lightning talks. Основной темой этого сезона стала — Python Core. А какие ещё тренды и боли обозначили эксперты индустрии, рассказали в статье.

#python #pycon

Идея для генератора паролей

Для максимальной рандомизации пароля вам нужно просто водить по экране, притягивая разные символы.

Кто реализует?)

Как купить домен

Вы когда-нибудь задумывались, как создать свой собственный сайт или веб-сервис? Этот гайд разъяснит, как легко и доступно купить домен, связать его с вашим IP и развернуть сервер NGINX.

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

#статья #web

ИИ против разума: битва за навыки программиста

Может ли ИИ сочинить симфонию? А создать шедевр искусства? Как показало время, ещё как! А ещё написать за вас код. Да, не всегда идеально, но может же.

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

#ии

Непереводимая игра слов

Таро врёт! В отличие от нашей IT-колоды

Цифровые арканы говорят с вами и проливают свет на ранее неведомые потоки информации. Вытяните «Карту дня» и получите мудрый совет судьбы: https://tprg.ru/Wpxs

Реклама

Функциональное программирование от А до Я на примере JavaScript: монады, функторы, каррирование, композиция

Если интересовались функциональное программированием, это видео для вас. В нем разобрали декларативность, чистые функции и сайд-эффекты, иммутабельность (неизменяемость), функции первого класса, функции высшего порядка, композицию/конвейер, частичное применение и каррирование, контейнеры, функторы и другие темы.

Сохраните, чтобы не потерять: https://www.youtube.com/watch?v=ScgmlDb5ed4

#javascript #лучшиепрактики

Где вести базу знаний по проекту: качественные альтернативы Notion

База знаний — не просто хранилище заметок. Это часть инфраструктуры, от которой зависит, как быстро команда ориентируется в проекте, передаёт задачи и принимает решения. Особенно в IT, где один документ может заменить неделю онбординга.

В подборке — современные инструменты, которые подойдут для этой цели лучше, чем привычный, но ушедший из России Notion. Есть решения с поддержкой Markdown, семантической структурой, интеграцией с таск‑менеджерами и даже встроенными AI‑ассистентами. Форматы разные — от минималистичных вики до платформ, заточенных под разработку.

#инструменты