WebDev+ | Веб-разработка

CSS Custom Highlight API позволяет подсвечивать результаты поиска

— без изменения структуры DOM.

::highlight(search-results) {
    background-color: #ff0066;
    color: white;
}

@WebDev_Plus

CSS shape() теперь входит в Baseline (новодоступная фича) → https://goo.gle/47nnZBG

Функция shape() позволяет создавать адаптивные (responsive) и сложные контуры (paths) для лэйаутов и анимаций, используя стандартные CSS-единицы, такие как %, rem и calc().

@WebDev_Plus

Метод массива some() в JavaScript

Проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию. Если хотя бы один элемент проходит проверку — возвращает true, иначе false.

Важные моменты:
- Вызывает callback-функцию для каждого элемента массива
- Прекращает итерацию, как только условие выполнено (early exit)
- Возвращает boolean (true или false)
- Пропускает пустые слоты в разреженных (sparse) массивах

@WebDev_Plus

Одна строка кода, чтобы предотвратить layout shift при изменении видимости скроллбара

@WebDev_Plus

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

Это предотвратит выход контента за пределы экрана, так что пользователь не сможет прокрутить его.

@WebDev_Plus

Изучайте программирование, играя в игры

1. Kubernetes http://k8sgames.com

2. DevOps http://devops.games

3. Linux http://overthewire.org

4. Git http://ohmygit.org

5. Python http://codecombat.com

6. CSS и HTML http://codepip.com

@WebDev_Plus

Мгновенно извлекайте всю дизайн-систему любого сайта

Dembrandt — это NPM-пакет, который сканирует сайт и вытаскивает его визуальные стилевые параметры: цвета, типографику, отступы и паттерны лейаута.

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

GitHub тут, сайт здесь 👜

Если вы знаете эти строки CSS, вы можете сверстать 80% макетов 👇

display: flex;
justify-content: center;
align-items: center;

display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

position: relative;
gap: 1rem;

@WebDev_Plus

CSS-тени. Глубина, которая действительно ощущается реалистично.

@WebDev_Plus

Вложенность CSS теперь является базовым стандартом!

Теперь можно писать вложенные селекторы прямо в CSS, как в Sass, но без использования препроцессоров. Просто пишите чистый CSS

Пример:

.card {
  color: black;
  &:hover { color: blue; }
  .title { font-weight: bold; }
}

Что изменилось?
Теперь вам не нужно использовать препроцессоры, чтобы работать с вложенными селекторами. Всё доступно прямо в стандартном CSS

@WebDev_Plus

Рарзраб прошёл через все круги ада, чтобы принести вам, на ближайшие годы, один из ключевых фундаментальных инструментов UI-инжиниринга (если не в реализации, то хотя бы в концепции): быстрый, точный и полный алгоритм измерения текста на стороне пользователя на чистом TypeScript, который можно использовать для верстки целых веб-страниц без CSS, обходя измерения DOM и перерасчёт reflow.

Верстка и измерение текста были последним и самым большим узким местом для создания более интересных UI, особенно в эпоху ИИ.

С этим решением больше не нужно выбирать между эффектностью GL-лендинга и практичностью статьи в блоге. Демки: тут

Установить через npm или bun:

npm install @chenglou/pretext
# или
bun add @chenglou/pretext

И используйте его, чтобы дать волю своему ИИ и создавать крутые демки 😶

@WebDev_Plus

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

Запомните мои слова 😁

@WebDev_Plus

React / JS / TS приём

Используйте символы (Symbol) вместо null/undefined для представления отсутствующих значений.

Этот пример провайдера в React:

- позволяет передавать null
- при этом всё ещё проверяет, что пользователь не забыл обернуть в <Provider>

Бывают случаи, когда null — это вполне валидное значение контекста (ctx).

@WebDev_Plus

CSS-совет:

Используйте svh, чтобы мобильная адресная строка не скрывала ваш UI. Это гарантирует точное соответствие видимой области экрана.

@WebDev_Plus

Свойство transitionType для ссылок (Links) в Next.js 16.2
(требует дополнительной настройки для <ViewTransitions />)

<ViewTransitions> всё ещё является экспериментальной возможностью в Next.js и не рекомендуется для продакшена

Полное демо 👇

https://github.com/SidKH/gist-of-next-demos/blob/cursor/view-transition-transition-types-demo/README.md

@WebDev_Plus

Точно измеряйте производительность своего кода

performance.mark() и performance.measure() позволяют вам инструментировать JavaScript, используя высокоточные тайминги.

Узнайте больше 👇
https://developer.mozilla.org/en-US/docs/Web/API/Performance/mark

@WebDev_Plus

На случай, если ты не знал: React концептуально не изобрёл RSC, SSR или Hydration.

SSR — это по сути Express:

app.get('/', (req, res) => {
  res.render('index', { name: 'John' })
})

RSC — это Pug:

if name == "Bob"
  button(class="btn") Hello Bob
else
  button(class="btn") My name is #{name}

Hydration — это jQuery:

$('.btn').click(...)

Отсюда и следствия: в SSR нет window, в RSC нельзя навесить onClick, а проблемы с hydration были ещё в jQuery (например, опечатка в .btn), просто тогда это называлось не так модно.

@WebDev_Plus

CSS-совет:

Создавайте плавные переходы между страницами всего одной строкой CSS

@WebDev_Plus

В Next.js 16.2 ошибки браузера теперь напрямую прокидываются в терминал во время разработки

Больше не нужно переключаться в консоль браузера, чтобы дебажить client-side ошибки.

Особенно полезно для AI-агентов, которые не могут открыть DevTools и посмотреть ошибки в браузере.

@WebDev_Plus

Laravel tip

Знал ли ты, что CarbonPeriod может генерировать все даты в заданном диапазоне?

Больше никаких пропущенных дней в графиках.

@WebDev_Plus