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

Новость от OpenAI! Они выпустили Apps SDK для создания собственных приложений прямо внутри ChatGPT.

Что нового:

React для разработки интерфейса

MCP для работы с API и логикой

Сохранение состояния и доступ к моделям ИИ

Круто, правда?

@WebDev_Plus

❤2👍2

1.14K views10:44

CSS-анимация автоизменения высоты с использованием grid

li > div[inert] {
  grid-template-rows: 0fr;
}
li > div {
  grid-template-rows: 1fr;
  transition: grid-template-rows .26s;
}

стрелки для навигации 📍

@WebDev_Plus

Please open Telegram to view this post

VIEW IN TELEGRAM

❤3

1.28K views16:07

1:36

Создайте анимацию входа на вашу веб-страницу с помощью SVG и нескольких строк CSS.

@WebDev_Plus

❤4

1.13K views06:07

ПРО СОВЕТ: REST — это переинжиниринг. Просто сделайте один эндпоинт /api, который напрямую принимает SQL-запросы.

Из соображений безопасности я добавил в сниппет AI-проверку

. 😄

@WebDev_Plus

Please open Telegram to view this post

VIEW IN TELEGRAM

😁10

1.14K viewsedited 16:07

Команда ядра React, наверное, спит, а я выкладываю еретические советы по React

Знаете ли вы, что хуки можно использовать прямо внутри JSX?

Конечно, так делать не стоит, но технически можно.

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

@WebDev_Plus

❤1👍1

1.11K views06:07

Лучшая утилита для создания софтвэр диаграмм.

К тому же бесплатная и совместимая с GitHub!

Идеально подходит для UML, потоков и процессов.
Экспорт в изображение, PDF, HTML и другие форматы.

→ http://app.diagrams.net

@WebDev_Plus

❤1

1.32K views16:07

Веб-дизайнеры и разработчики, это может стать библиотекой анимации следующего уровня

https://reactbits.dev/

@WebDev_Plus

❤8

1.34K views06:07

0:13

Меняй значение border-radius в зависимости от размера контейнера или экрана — всего одной строкой кода.

Условный Border Radius на CSS

.box {
  border-radius: calc(sign(100cqi - 100%) * 2rem);
}

По умолчанию значение равно 2rem. Когда элемент занимает всю ширину (его ширина равна ширине контейнера), радиус скругления становится 0.
Если контейнер не задан, 100cqi автоматически подставит 100vw (ширину экрана).

Попробуй менять размер экрана или контейнера в демке , чтобы увидеть, как это работает:

@WebDev_Plus

🤔1

1.19K views16:07

может быть полезно → добавьте это в ваш css (сверху), это отменит избыточный вес шрифта tailwind на сайте, и вес шрифта будет выглядеть точно так же, как на figma.

@WebDev_Plus

❤7🎉1👌1

1.1K views06:07

0:16

Visual Effect теперь с открытым исходным кодом

https://github.com/kitlangton/visual-effect

Со звуком: https://effect.kitlangton.com/effect-repeat-while-output

@WebDev_Plus

1.07K views16:07

Раньше: 30 минут перетаскивания и сортировки папок.
Теперь: "Warp, наведи порядок в этом беспорядке, пожалуйста".

Вот это ИИ, который делает мою жизнь лучше, хахаха.

→ http://midu.link/warp

@WebDev_Plus

😁1

1.07K views06:07

0:12

Используй CSS-свойства вроде blur и opacity в анимациях, чтобы всё выглядело плавно, а не топорно.

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

@WebDev_Plus

👎4👍1

1.04K views16:07

Chrome DevTools — без сомнений, мой любимый MCP-сервер.

Запустив всего две команды в терминале, ты можешь подключить Claude Code прямо к браузеру с полным доступом:

Запускаем Chrome:

google-chrome --remote-debugging-port=9222 --user-data-dir="$HOME/.config/google-chrome"

Добавляем MCP, который коннектится к браузеру:

claude mcp add chrome-devtools -- npx -y chrome-devtools-mcp@latest -u http://localhost:9222

@WebDev_Plus

1.02K views06:07

0:36

Закреплённый сайдбар с переходом

.layout:has(:popover-open) {
  grid-template-columns: var(--sidebar-width) 1fr;
}
aside:popover-open {
  translate: 0 var(--ctrl);
  height: var(--extend);
}

Чистый CSS, ноль JS для перехода лейаута.
Куча мелких настроек, с которыми можно поиграться

@WebDev_Plus

1.05K views09:30

0:16

https://css-tip.com/tooltip-anchor/

@WebDev_Plus

Динамическое позиционирование тултипа с использованием Anchor Positioning

С помощью anchor positioning можно «привязать» один элемент к другому и при этом гарантировать, что он останется видимым на экране, даже если привязанный элемент смещается. Теперь представим, что этот элемент — тултип. А что насчет его «хвостика»? Его тоже можно настроить так, чтобы он всегда указывал на якорь.

#anchor {
  position: absolute;
  anchor-name: --anchor;
}

#tooltip {
  --d: 1em;   /* расстояние между якорем и тултипом */
  --s: 1.2em; /* размер хвостика */
  
  position: absolute; 
  position-anchor: --anchor;
  /* размещаем тултип сверху */
  position-area: top;
  bottom: var(--d);
  margin-top: var(--d); /* этот margin наследуется псевдоэлементом, здесь он ничего не делает */
  /* если сверху тултип не помещается — переключаемся вниз (margin перевернётся автоматически) */
  position-try-fallbacks: flip-block; 
  anchor-name: --tooltip;
}

/* хвостик тултипа */
#tooltip:before {
  content: "";
  position: fixed;
  z-index: -1;
  width: var(--s);
  background: inherit;
  /* вертикальное положение относительно тултипа */
  top:    calc(anchor(--tooltip top) - var(--d));
  bottom: calc(anchor(--tooltip bottom) - var(--d));
  /* горизонтальное положение относительно якоря */
  left: calc(anchor(--anchor center) - var(--s)/2);
  margin: inherit; /* делает магию — скрывает верх или низ формы в зависимости от положения */
  /* форма стрелки */
  clip-path: polygon(
    50% .2em,
    100% var(--d),
    100% calc(100% - var(--d)),
    50% calc(100% - .2em),
    0 calc(100% - var(--d)),
    0 var(--d)
  );
}

❤6

987 views06:07

Не знаете, какие единицы измерения использовать в CSS?
px, rem, em, fr, %, vh... Их слишком много 😡

Эта диаграмма подскажет вам решение и объяснит его.

Решите с помощью информации, какая единица является правильной.
→ http://whatunit.com

@WebDev_Plus

Please open Telegram to view this post

VIEW IN TELEGRAM

❤4🔥4🥰1

1.09K views16:07

3:43

Media is too big

Как Apple делает эти безумные видеопереходы при прокрутке?

Давайте воссоздадим это с помощью чистого CSS с анимацией, управляемой прокруткой, и view-timeline.

Именно так, никаких слушателей событий прокрутки

Получить фрагменты кода, подсказки и полное руководство можно здесь

@WebDev_Plus

1.07K views06:07