Хотите изучать и практиковать SQL без инсталляций? 🤔

Этот ресурс работает в вашем браузере...

И вы можете создавать базы данных MySQL и PostgreSQL!

Это бесплатно ⏩ http://sqlplayground.app

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

Оцените эти 4 CSS-анимации для вашего следующего проекта

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

Создавайте веб-страницы быстрее с помощью этого!
Коллекция компонентов пользовательского интерфейса, которые можно копировать и вставлять.

Совместим с React, Angular, Vue, Svelte и другими.
Сделано с помощью Tailwind и легко настраивается.

→ http://layoutsfortailwind.lalokalabs.dev

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

Этот сайт - золотая жила для программистов! 🔥

+1500 бесплатных HTML шаблонов + компоненты пользовательского интерфейса.

Здесь есть React, Angular, Vue, Astro, Next.js и многое другое!

→ http://htmlrev.com

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

Эта огромная библиотека включает 180 тщательно подобранных CSS-градиентов, которые идеально подойдут для ваших проектов 😎

https://webgradients.com

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

100% CSS, 0% JavaScript

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

Safari и Firefox слишком долго спят – анимации, управляемые прокруткой, просто потрясающие!

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

➡️ @byFrontDeveloper

Трюки для боковой панели с использованием 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