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

Макет для тренировки (илоком)

Посмотреть макет 👨‍💻

#макетдлятренировки

Атрибут step

Читать 👨‍💻

#html | #теория

TensorFlow.js

Читать 👨‍💻

#полезнаястатья

TypeScript 7 — компилятор переписали на Go

8 июля вышел TypeScript 7.0. Это самая крупная перестройка проекта за всю его историю: компилятор и тулинг целиком портировали на Go. Работа шла больше года и была главным приоритетом команды.

Что по цифрам
Полные сборки ускорились в 8–12 раз. На кодовой базе VS Code сборка упала со 125,7 до 10,6 секунд, у Sentry — со 139,8 до 15,7. Память просела на 6–26%.
Но интереснее не сборки, а редактор: открытие ошибки в VS Code сократилось с 17,5 секунд до 1,3. Плюс на тестах со Slack, Figma и Google падения language server'а стали реже на 60%, а зависшие команды — на 80%.

Что НЕ изменилось
Ни нового синтаксиса, ни нового тайпчекера. Код методично портировали, а не переписывали с нуля — логика проверки типов структурно идентична шестёрке. Прогнали ~20 000 тестов: из ~6000 кейсов, где TS 6 ругается, TS 7 промолчал только в 74.
Это релиз про производительность, которому просто досталась мажорная версия.

Что сломается
→ target: "es5" и es3 больше нет. Минимум — ES2015. Всё, что в TS 6 было деприкейтом, в семёрке стало жёсткой ошибкой.
→ downlevelIteration можно смело выкидывать из tsconfig.
→ Главная боль: стабильного программного API пока нет. typescript-eslint, ts-morph, кастомные трансформеры, webpack-лоадеры — всё это не гарантированно работает с Go-компилятором. Новый API обещают в 7.1.

Как переезжать

npm install -D typescript

Ставится обычный tsc, только теперь это нативный бинарник. Для тулинга, которое ещё не готово, есть пакет @typescript/typescript6 — он даёт бинарь tsc6 и позволяет держать шестёрку рядом без конфликтов имён.
Для VS Code вышло отдельное расширение, Visual Studio включает семёрку сам по воркспейсу.

Дальше
Команда возвращается к фичам и эргономике. Обещают релизы каждые 3–4 месяца, как раньше. Из интересного в планах — WASM-сборки, что откроет нормальный тайпчек в браузерных редакторах и плейграундах.

Если у вас проект на webpack — возможно, стоит подождать 7.1. Если Vite/esbuild и современный tsconfig — можно пробовать прямо сейчас.

Контекст наложения в css

Читать 👨‍💻

#css | #полезности

Игра судоку, реализованная на html и css

Посмотреть на codepen 👨‍💻

#практика

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Тег <map>
2. Атрибут dir
3. Все про Frontend разработчика

Лучшие фронтенд вакансии @job_webdev:
1. HTML/CSS-разработчик / Верстальщик (Junior / Junior+)
2. frontend разработчик ai-продуктов
3. frontend developer for igaming

Лучшие дизайн вакансии @job_webdesign:
1. product designer для авто.ру бизнес
2. ux/ui дизайнер для градостроительства
3. продуктовый дизайнер онлайн-кинотеатра

#лучшеезанеделю

Макет для тренировки (agro practice)

Перейти к макету 🧑‍💻

#макетдлятренировки

Все про Frontend разработчика

Читать 👨‍💻

#полезности

Атрибут dir

Читать 👨‍💻

#html | #теория

Как сделать круговой текст?

Попробуем реализовать эту задачу при помощи 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;
}

#полезности

Тег <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 | #теория

Подборка лучших постов за прошлую неделю

Лучшие статьи @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 дизайнер для цифрового продукта

#лучшеезанеделю

Задача на 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

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

#домашка

Макет для тренировки (keychap)

Перейти к макету 🧑‍💻

#практика | #макет

Адаптивный дашборд на react и tailwind

Смотреть на codepen 👨‍💻

#практика

Преимущества и недостатки CSS-in-JS

Читать 👨‍💻

#полености

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 станет мощнейшим бустом.

#полезнаястатья

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. 3D анимация волны
2. Создание голосовых интерфейсов с помощью Web Speech API
3. JS Задача: Объедините два массива по ID

Лучшие фронтенд вакансии @job_webdev:
1. frontend разработчик медиаконтента
2. Vue разработчик
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. ux/ui дизайнер банковских продуктов
2. Web-дизайнер
3. ux/ui дизайнер для цифрового продукта

#лучшеезанеделю

JS Задача: Объедините два массива по ID

Описание:
Учитывая два массива arr1 и arr2, верните новый массив joinedArray. Все объекты в каждом из двух входных массивов будут содержать поле id, которое имеет целочисленное значение.
joinedArray - это массив, сформированный путем объединения arr1 и arr2 на основе их идентификационного ключа.
Длина joinedArray должна быть равна длине уникальных значений id. Возвращаемый массив должен быть отсортирован в порядке возрастания на основе идентификационного ключа.
Если данный идентификатор существует в одном массиве, но не в другом, то единственный объект с таким идентификатором должен быть включен в результирующий массив без изменений.
Если два объекта имеют общий идентификатор, их свойства должны быть объединены в один объект:
Если ключ существует только в одном объекте, эта единственная пара ключ-значение должна быть включена в объект.
Если ключ включен в оба объекта, значение в объекте из arr2 должно переопределять значение из arr1.

Пример:

Input: 
arr1 = [
    {"id": 1, "x": 1},
    {"id": 2, "x": 9}
], 
arr2 = [
    {"id": 3, "x": 5}
]
Output: 
[
    {"id": 1, "x": 1},
    {"id": 2, "x": 9},
    {"id": 3, "x": 5}
]

#домашка