Трюки для боковой панели с использованием CSS Переход элементов раскрытого меню к высоте "auto" с использованием grid.

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


li > div[inert] { grid-template-rows: 0fr; } — Для элементов div, которые имеют атрибут inert, устанавливается строка сетки с высотой 0fr (то есть элемент не будет видимым).
li > div { grid-template-rows: 1fr; transition: grid-template-rows .3s; } — Для всех остальных элементов div в списке (li), высота строки сетки устанавливается как 1fr, что делает её доступной. Также добавляется плавный переход изменения высоты в течение 0.3 секунды.

🔜 Это позволяет плавно раскрывать и скрывать элементы в меню боковой панели с использованием CSS grid.

➡️ @byFrontDeveloper | дать буст

OlmOCR — это новый инструмент от allen_ai для распознавания текста в любых PDF

Я загрузил один из своих старых конспектов магистратуры, и он отлично справился ❤️

Основан на Qwen2VL-7B, работает сразу «из коробки» с библиотекой transformers и имеет лицензию Apache 2.0.

https://olmocr.allenai.org/

➡️ @byFrontDeveloper | дать буст

Наткнулся на крутой сайт для фронтендеров — BFE.dev. Это площадка для прокачки навыков и подготовки к собеседованиям

Здесь собрано более 600 задач по JavaScript, React, TypeScript, CSS и даже системному дизайну

Можно писать код прямо в браузере с поддержкой TypeScript, сразу проверять решения и смотреть, как справились другие

➡️ @byFrontDeveloper | дать буст

ahahahha 😄

➡️ @byFrontDeveloper

Шпаргалка по селекторам CSS :nth-child:

➡️ @byFrontDeveloper

Совет по Figma: Закрепите пропорции. 👩‍💻

Используйте «Сохранить соотношение сторон» для кадров, фигур, изображений, видео, векторных объектов и текста.

➡️ @byFrontDeveloper

Нужна графика для вашего сайта или приложения? 🤔

Тогда эта библиотека сделает все возможное!

- Используйте их с React, Vue и веб-компонентами.
- Отзывчивая и оптимизированная для мобильных устройств
- Создана на основе JavaScript и canvas
- Оптимизирована для работы с большим количеством данных

https://www.tradingview.com/lightweight-charts/

➡️ @byFrontDeveloper

Мощная коллекция пользовательских хуков для React 🫥

Сэкономьте время на программировании ваших приложений

✓ Более 50 доступных
✓ С примерами кода
✓ Совместимость с TypeScript

→ http://usehooks.com

➡️ @byFrontDeveloper

➡️ @byFrontDeveloper

Это легковесная декларативная библиотека для создания 3D-приложений в React, основанная на движке PlayCanvas.

Поддерживает физику, события указателя, Gaussian Splats и встроенные скрипты

👉 https://playcanvas-react.vercel.app/docs

➡️ @byFrontDeveloper

Нужно создать форму с несколькими шагами?
С помощью этой библиотеки вы сделаете это, просто используя JSON

✓ Внесите логику, переменные, условия, циклы...
✓ Совместимость с React

> npm install formity

➡️ @byFrontDeveloper

Умопомрачительный трюк Google Chrome для разработчиков 😵

Теперь можно делать скриншоты всей страницы или выбранной области без расширений, совершенно бесплатно

➡️ @byFrontDeveloper

Классное расширение, которе позволяет измерять расстояние между элементами на веб-странице в пикселях прямо в браузере.

Полезно для веб-разработчиков и дизайнеров, которые стремятся к пиксельному совершенству в своих макетах

➡️ @byFrontDeveloper

Если вы используете npm, то держите инструмент Bundlephobia для анализа размера и влияния npm-пакетов перед их добавлением в ваш проект

Также можно воспользоваться альтернативным сервисом pkg-size.dev

➡️ @byFrontDeveloper

Если вы испытываете трудности с CSS и веб-дизайном

Этот ресурс спасет вам жизнь!

Получите самые популярные макеты с Flex и Grid.

Полностью настраиваемые и отзывчивые.

https://layout.bradwoods.io/

➡️ @byFrontDeveloper