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

На случай, если ты не знал: 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

885 views16:07

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

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

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

@WebDev_Plus

Please open Telegram to view this post

VIEW IN TELEGRAM

866 views06:07

0:15

Свойство 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

Please open Telegram to view this post

VIEW IN TELEGRAM

❤1🔥1

963 views16:07

CSS-совет:

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

@WebDev_Plus

❤1

902 views06:07

React / JS / TS приём

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

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

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

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

@WebDev_Plus

❤2

924 views16:07

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

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

@WebDev_Plus

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥1

777 views16:07

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

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

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

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

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

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

@WebDev_Plus

Please open Telegram to view this post

VIEW IN TELEGRAM

867 views06:07

The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.

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

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

Пример:

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

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

@WebDev_Plus

MDN Web Docs

CSS nesting - CSS | MDN

❤5

948 views16:07

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

@WebDev_Plus

866 views06:33

Если вы знаете эти строки 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

Please open Telegram to view this post

VIEW IN TELEGRAM

❤3😁1

836 views16:07

0:28

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

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

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

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

👜

Please open Telegram to view this post

VIEW IN TELEGRAM

793 views06:07

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

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

👍4

889 views16:07

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

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

@WebDev_Plus

738 views06:07

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

@WebDev_Plus

👍3

771 views17:00

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

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

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

@WebDev_Plus

786 views06:07

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

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

@WebDev_Plus

733 views16:07

0:23

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

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

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

@WebDev_Plus

❤5👍3

752 views06:07

hucre — zero-dependency движок таблиц на TypeScript

Создан 8 дней назад и уже набрал 489 звёзд. Поддерживает чтение и запись XLSX / CSV / ODS, а полный gzip-бандл весит всего 18 КБ.

Другими словами, XLSX-парсер упакован в dependency-free «гаджет» размером 18 КБ.

https://github.com/productdevbook/hucre

@WebDev_Plus

❤4

739 views16:07