Вёрстка сайтов | HTML, CSS, JS

Домашняя школа для 5-11 классов. Онлайн-обучение! ⚡Профориентологи помогут ученикам сделать осознанный и подходящий выбор вуза и будущей профессии, исследуя истинные желания, таланты и интересы. ⚡Наши психологи поддерживают эмоциональное благополучие учеников, помогая им справляться со стрессом, трудностями в учёбе, в познании себя и мира вокруг. ⚡Родители и дети не останутся в вакууме, мы создаём пространство, где учёба сочетается с живым общением и новыми открытиями — мы всегда рядом! Узнать больше #реклама 16+ s.salebot.pro О рекламодателе

Атрибут dir Читать 👨‍💻 #html | #теория

Дачная дача в Т-Банк Шопе Футболки с огурцами, тыквами, капустой и другие крутые штуки, да еще и с финансовыми пожеланиями. Надо брать. Посмотреть каталог #реклама tbank.ru О рекламодателе

Выспался, собрал чат-бота в течения дня → заработал 27 000₽ Это не развод, а обычный день работы, тех. спеца: Взял схему от заказчика → собрал бота по шаблону → отдал клиенту → получил деньги👌 Работы — 2–4 часа. Оплата — 20–50 000₽ за проект. ✅ Не надо рано вставать и ехать на "любимую работу" ✅ Никакого долгого обучения или знаний программирования ✅ Если умеешь пользоваться браузером, то легко справишься И спрос на это сейчас огромный, заказов куча. Бизнесу нужны ИИ, чат-боты и автоматизация уже сегодня. Это одна из самых быстрорастущих ниш 2026 года, просто заходи и бери заказы. Инструкции здесь, открой пока доступна: 👉 https://t.me/Alekseicoach_bot?start=testdrivetg49 Если ты хочешь реально хорошо зарабатывать, от 150к в месяц без начальников, нужно решать важные задачи бизнесов. Сейчас это задачи по сборке ботов на конструкторах (да, у тебя по-любому получится). Пробуй 👇 https://t.me/Alekseicoach_bot?start=testdrivetg49

Квартиры. Петербург. Колпино. Новостройка. Скидки до 20% Жилой комплекс "Квартал Заречье" Санкт-Петербург. Колпино. 4 девятиэтажных жилых корпуса 8-этажный крытый гараж на 496 парковочных мест В живописном месте у реки Ижора. На первых этажах будут размещены магазины, кофейни, поликлиника и зона коворкинга. Перейти на сайт Финансовые услуги оказывает: ПАО «Сбербанк». Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО «СЗ «ЗАГОРОДНАЯ, 71». #реклама квартал-заречье.рф О рекламодателе

Как сделать круговой текст? Попробуем реализовать эту задачу при помощи svg. Формат SVG поддерживает отображение текста вдоль любого пути, в том числе и дуги окружности. Легче всего поместить текст в элемент textPath внутри элемента text, который ссылается на элемент path, определяющий форму пути.

<svg class="circle-text" viewBox="0 0 100 100">
  <path id="circle-text" d="M 0,50 a 50,50 0 1,1 0,1 z" />
  <text>
    <textPath xlink:href="#circle-text">
      Круговой текст
    </textPath>
  </text>
</svg>

Добавляем стили, цвет текста в данном случае будет задаваться через свойство fill:

.circle-text {
  display: block;
  overflow: visible;
  width: 100px;
  font-size: 28px;
  fill: red;
}
.circle-text path {
    fill: none;
}

#полезности

Решайте задачи и готовьтесь к техсекции на стажировку А ты сможешь решить алгоритмическую задачу за час и без подсказок? Яндекс проводит бесплатные тренировки по алгоритмам для тех, кто хочет систематизировать знания, прокачать решение задач и подготовиться к техническому собеседованию. -Короткие видеоуроки -Практические задачи -Регулярные соревнования -Решение задач на время -Рейтинг и награды -Возможность получить сертификат Мы тренируем не только знание алгоритмов, но и умение применять их тогда, когда рядом нет подсказок. Проверь свои алгоритмические навыки и прокачай слабые места. Регистрируйся на бесплатные тренировки! Записаться онлайн #реклама 16+ yandex.ru О рекламодателе

Тег <map> Тег <map> используется для создания областей с кликабельными ссылками на изображении. Он работает вместе с тегом <area>, который задает области на изображении, и делает их интерактивными. Как работает <map>? Задайте картинку с атрибутом usemap, указывающим на имя карты. Создайте карту с определенными областями, которые станут ссылками:

<img src="image.jpg" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="34,44,270,350" href="page1.html" alt="Прямоугольник">
  <area shape="circle" coords="337,300,44" href="page2.html" alt="Круг">
</map>

shape: Определяет форму области (прямоугольник, круг или многоугольник). coords: Координаты, задающие область клика. href: Ссылка, которая откроется при клике. Почему <map> полезен? Создание интерактивных изображений: Используется для создания сложных карт и схем, где каждая область может вести на отдельную страницу. Лучший UX: Добавляет удобство для пользователей, которым нужно взаимодействовать с конкретными частями изображения. #html | #теория

Из разработчика в тимлиды: как говорить с людьми Стать тимлидом — значит научиться говорить с людьми о сложном. Но как сказать разработчику, что код — "не очень", не обидев? 📅 16 сентября в 20:00 Александр Пряхин разберет техники обратной связи без эскалации. Узнаете, как формулировать по фактам, снижать защитную реакцию и завершать разговор договоренностями. Для разработчиков, готовящихся к лидерству. Узнать больше #реклама 16+ otus.ru О рекламодателе

Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Vue Vapor 2. Преимущества и недостатки CSS-in-JS 3. Макет для тренировки (keychap) Лучшие фронтенд вакансии @job_webdev: 1. vue.js разработчик 2. Frontend-разработчик 3. frontend разработчик ai-продуктов Лучшие дизайн вакансии @job_webdesign: 1. Web-дизайнер 2. Web-дизайнер 3. ux/ui дизайнер для цифрового продукта #лучшеезанеделю

Регистрируйтесь на Yandex Scale 2026 Главная конференция Yandex Cloud. Узнайте о сервисах, которые меняют ваш бизнес. 4 офлайн-трека (AI, Infra + DevTools, Data, Security), онлайн-трек Deep Tech, воркшопы по ИИ и интерактивы. Подробнее о программе читайте в карточках🗒 📅24 сентября 🚗Москва + 💻онлайн Участие бесплатное! Зарегистрироваться #реклама 16+ scale.yandex.cloud О рекламодателе

Задача на JavaScript: У вас есть массив чисел, представляющих высоты столбов. Вам нужно найти максимальную площадь, которую можно охватить, выбрав два столба и протянув между ними горизонтальную линию. Напишите функцию findMaxArea, которая принимает массив heights в качестве аргумента и возвращает максимальную площадь. Примеры:

findMaxArea([1, 8, 6, 2, 5, 4, 8, 3, 7]); // Возвращает 49
findMaxArea([4, 3, 2, 1, 4]); // Возвращает 16
findMaxArea([1, 2, 1]); // Возвращает 2

В этой задаче вы должны реализовать алгоритм с наилучшей временной сложностью. #домашка

Бесплатный курс по дизайну в FIGMA от Yudaev School Онлайн-программа с наставником и чатом. Внимание! 80% практики. ✅По результату обучения у вас будет портфолио из нескольких работ. ✅Сертификат о прохождении курса. ✅Возможность пройти полное обучение и получить карьерное сопровождение! Учитесь дизайну у профессионалов в Yudaev Shool. Переходи по кнопки: "Подробнее" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

Макет для тренировки (keychap) Перейти к макету 🧑‍💻 #практика | #макет

Что читают ИТ-директора и ведущие инженеры сегодня? Если ваша работа связана с инфраструктурой, базами данных, импортозамещением или эксплуатацией корпоративных систем, времени на бесполезный контент просто нет. «Онланта ТехЛаб» — это канал, где публикуют только то, что действительно пригодится в работе. Здесь разбирают новые отечественные продукты, сравнивают технологии, анализируют архитектурные решения, делятся результатами тестов. Реальные сценарии использования, ограничения платформ и практические рекомендации. Регулярно выходят обзоры, интервью с разработчиками, новости рынка и материалы по PostgreSQL, Kubernetes, виртуализации, облакам и AI. Если хотите быть в курсе технологий и принимать решения, опираясь на опыт практиков, этот канал точно заслуживает места в вашей ленте. Подписаться #реклама 16+ О рекламодателе

Адаптивный дашборд на react и tailwind Смотреть на codepen 👨‍💻 #практика

Дачная дача в Т-Банк Шопе Футболки с огурцами, тыквами, капустой и другие крутые штуки, да еще и с финансовыми пожеланиями. Надо брать. Посмотреть каталог #реклама tbank.ru О рекламодателе

Преимущества и недостатки CSS-in-JS Читать 👨‍💻 #полености

Здесь делают hh.ru. И показывают, как именно. Узнавайте первыми о митапах, подсматривайте, как принимаются продуктовые решения, и знакомьтесь с людьми, которые создают hh.ru. Подписаться #реклама О рекламодателе

Vue Vapor Если коротко: это новый стратегический режим компиляции, который полностью отказывается от Virtual DOM (VDOM) в пользу прямого манипулирования реальным DOM. В чём суть? Сейчас Vue 3 использует Virtual DOM: при изменении состояния создаётся новое виртуальное дерево, сравнивается со старым (diffing), и только потом изменения вносятся в реальный DOM. Это работает быстро, но не бесплатно с точки зрения памяти и CPU. Vapor Mode берет вдохновение у Svelte и SolidJS. Он компилирует ваши шаблоны в чистый JavaScript, который при изменении состояния обновляет только конкретные узлы DOM напрямую, используя существующую систему реактивности (Signals / Reactivity API). Главные преимущества * Нулевой оверхед на VDOM: Нет этапа comparison/diffing виртуальных деревьев. * Меньше памяти: Не нужно держать в памяти структуры виртуальных узлов. * Микроскопический бандл: Если ваш проект полностью written/compiled в Vapor Mode, базовый runtime Vue становится катастрофически мал (не нужно тащить сам VDOM-движок). * Молниеносный Performance: Особенно заметно на слабых устройствах и при работе с огромными списками/таблицами. Как это выглядит в коде? С точки зрения синтаксиса .vue файлов ничего не меняется. Вы пишете тот же <script setup> и тот же Composition API. Разница происходит на этапе сборки. Включить Vapor Mode можно будет как на уровне отдельных компонентов (через суффикс, например, `.vapor.vue`), так и для всего приложения целиком.

<!-- Ваш привычный код будет компилироваться в прямой DOM-manipulation -->
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button @click="count++">Count: {{ count }}</button>
</template>

Бесшовный переход Один из главных плюсов концепции — постепенная интеграция (Opt-in). Вам не придётся переписывать всё приложение сразу: * Vapor-компоненты смогут работать внутри обычных VDOM-компонентов. * Обычные VDOM-компоненты можно будет вставлять в Vapor-дерево. Когда ждать и стоит ли переходить? Vapor Mode всё ещё находится в активной разработке. Это не замена текущему Vue 3, а альтернативная стратегия компиляции для случаев, когда критически важна максимальная производительность. Если вы делаете стандартные SPA/dashboard текущего VDOM Vue 3 хватает с запасом. Но для высоконагруженных UI, мобильных webview и приложений с жесткими требованиями к перформансу Vapor станет мощнейшим бустом. #полезнаястатья