Если ты используешь Tailwind, не игнорируй селекторы для дочерних элементов. Они упрощают стили и убирают дублирование.
Vibe агенты для кодинга до такого не дотягивают.
Если ты работаешь с обычным CSS, листай дальше.
Сегодня узнал, что некоторые Tailwind разработчики вообще не любят селекторы для потомков.
После работы с CSS для меня дико, почему копипастить одну и ту же утилиту на каждый дочерний элемент считается лучше, чем одна аккуратная родительская правило.
Хочешь, бери этот совет, хочешь, нет. Мне он сегодня оказался полезен. Даже просто знать о таком варианте уже неплохо.
@WebDev_Plus
Vibe агенты для кодинга до такого не дотягивают.
Если ты работаешь с обычным CSS, листай дальше.
Сегодня узнал, что некоторые Tailwind разработчики вообще не любят селекторы для потомков.
После работы с CSS для меня дико, почему копипастить одну и ту же утилиту на каждый дочерний элемент считается лучше, чем одна аккуратная родительская правило.
Хочешь, бери этот совет, хочешь, нет. Мне он сегодня оказался полезен. Даже просто знать о таком варианте уже неплохо.
@WebDev_Plus
This media is not supported in your browser
VIEW IN TELEGRAM
Вышел новый плагин dither для Tailwind — чисто CSS-решение для создания дезеринг-эффектов.
Лёгкий в подключении, настраиваемый, работает с разными компонентами и полностью open-source. Даже без глубоких знаний можно легко внедрить его в свой проект, например в Cursor.
https://dither.floriankiem.com/
@WebDev_Plus
Лёгкий в подключении, настраиваемый, работает с разными компонентами и полностью open-source. Даже без глубоких знаний можно легко внедрить его в свой проект, например в Cursor.
https://dither.floriankiem.com/
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Идеальный SEO-инструмент для веб-разработчиков
Он позволяет мгновенно проверить, имеют ли доступ к вашему сайту Google-боты и AI-краулеры.
Просто введите адрес сайта — и инструмент прогонит несколько проверок, чтобы дать детальный инсайт о crawlability и accessibility.
Лёгкий способ убедиться, что ваш сайт оптимизирован под поисковые системы и AI-платформы :)
Источник : crawlercheck.com
@WebDev_Plus
Он позволяет мгновенно проверить, имеют ли доступ к вашему сайту Google-боты и AI-краулеры.
Просто введите адрес сайта — и инструмент прогонит несколько проверок, чтобы дать детальный инсайт о crawlability и accessibility.
Лёгкий способ убедиться, что ваш сайт оптимизирован под поисковые системы и AI-платформы :)
Источник : crawlercheck.com
@WebDev_Plus
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Visual Studio Code теперь умеет автоматически обрабатывать TODO-комментарии в коде. С новой функцией и помощью GitHub Copilot можно за два клика решать задачи и сразу создавать PR.
@WebDev_Plus
@WebDev_Plus
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Топ-ресурс для изучения алгоритмов программирования. Пошагово объясняет их, с кодом и в визуальном, наглядном виде.
Более 70 алгоритмов на JavaScript, Java и C++:
http://algorithm-visualizer.org
@WebDev_Plus
Более 70 алгоритмов на JavaScript, Java и C++:
http://algorithm-visualizer.org
@WebDev_Plus
❤4
Если нужно импортировать API с пагинацией, движок воркфлоу не требуется. В Laravel это можно решить с помощью рекурсивного диспетчеризации через Job Batches:
@WebDev_Plus
@WebDev_Plus
❤4
Новый селектор if() в CSS позволяет писать условные стили прямо в строке.
Кроме того, можно переключать стили на основе пользовательских свойств
@WebDev_Plus
Кроме того, можно переключать стили на основе пользовательских свойств
@WebDev_Plus
❤1🤔1
I. Виртуальный DOM, reconciliation и производительность рендера в React и других фреймворках
II. Цикл событий в браузере, работа с асинхронностью и оптимизация долгих задач
III. Паттерны управления состоянием (Redux, Zustand, Context API) и их влияние на производительность
IV. Основы веб-безопасности: XSS, CORS, CSRF и работа с токенами
V. Оптимизация фронтенд-производительности: ленивые загрузки, разделение кода, кеширование и критический путь рендеринга
@WebDev_Plus
II. Цикл событий в браузере, работа с асинхронностью и оптимизация долгих задач
III. Паттерны управления состоянием (Redux, Zustand, Context API) и их влияние на производительность
IV. Основы веб-безопасности: XSS, CORS, CSRF и работа с токенами
V. Оптимизация фронтенд-производительности: ленивые загрузки, разделение кода, кеширование и критический путь рендеринга
@WebDev_Plus
💊4
PHP Laravel пакет для удобной работы с запросами
Один из моих любимых пакетов от Spatie — laravel-query-builder
С его помощью можно строить eloquent-запросы прямо из API-запросов. Пакет умеет:
- Сортировать
- Фильтровать
- Подгружать связи
И многое другое
При этом пользоваться им очень просто.
@WebDev_Plus
Один из моих любимых пакетов от Spatie — laravel-query-builder
С его помощью можно строить eloquent-запросы прямо из API-запросов. Пакет умеет:
- Сортировать
- Фильтровать
- Подгружать связи
И многое другое
При этом пользоваться им очень просто.
@WebDev_Plus
❤3
В React скоро появится новый компонент — <Activity>. С его помощью можно будет скрывать UI, сохраняя при этом внутреннее состояние. Фича войдёт в следующий релиз, и выглядит она действительно очень полезной.
@WebDev_Plus
@WebDev_Plus
❤6👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Парень реализовал CPU и RAM.
На JavaScript.
https://planetscale.com/blog/processes-and-threads
@WebDev_Plus
На JavaScript.
https://planetscale.com/blog/processes-and-threads
@WebDev_Plus
🔥6❤3❤🔥2
Сайты бесплатного хостинга.
Общие платформы бесплатного хостинга
1. http://github.io
2. http://netlify.com
3. http://vercel.com
4. http://surge.sh
5. http://render.com
6. http://cloudflare.com/pages
7. http://000webhost.com
8. http://infinityfree.net
9. http://freehosting.com
10. http://awardspace.com
Бесплатный хостинг для статических веб-сайтов
11. http://pages.github.com
12. http://sites.google.com
13. http://firebase.google.com
14. http://glitch.com
15. http://neocities.org
16. http://1mb.site
17. http://codeberg.org
18. http://docusaurus.io
19. http://fleek.co
20. http://ipfs.io
Бесплатный хостинг для динамических веб-сайтов
21. http://replit.com
22. http://heroku.com
23. http://railway.app
24. http://pythonanywhere.com
25. http://clever-cloud.com
26. http://freeflaskhosting.com
27. http://fly.io
28. http://glitch.me
29. http://cyb.ai
30. http://openshift.com
Бесплатный хостинг для WordPress
31. http://wordpress.com
32. http://infinityfree.net/wordpress-host...
33. http://x10hosting.com
34. http://biz.nf
35. http://freehostia.com
36. http://byethost.com
37. http://wopop.com
38. http://awardspace.com/wordpress-host...
39. http://pantheon.io
40. http://webfreehosting.net
Бесплатный хостинг для приложений Node.js
41. http://glitch.com
42. http://render.com
43. http://railway.app
44. http://heroku.com
45. http://vercel.com
46. http://kinsta.com
47. http://clever-cloud.com
48. http://fly.io
49. http://stormkit.io
50. http://deno.com
@WebDev_Plus
Общие платформы бесплатного хостинга
1. http://github.io
2. http://netlify.com
3. http://vercel.com
4. http://surge.sh
5. http://render.com
6. http://cloudflare.com/pages
7. http://000webhost.com
8. http://infinityfree.net
9. http://freehosting.com
10. http://awardspace.com
Бесплатный хостинг для статических веб-сайтов
11. http://pages.github.com
12. http://sites.google.com
13. http://firebase.google.com
14. http://glitch.com
15. http://neocities.org
16. http://1mb.site
17. http://codeberg.org
18. http://docusaurus.io
19. http://fleek.co
20. http://ipfs.io
Бесплатный хостинг для динамических веб-сайтов
21. http://replit.com
22. http://heroku.com
23. http://railway.app
24. http://pythonanywhere.com
25. http://clever-cloud.com
26. http://freeflaskhosting.com
27. http://fly.io
28. http://glitch.me
29. http://cyb.ai
30. http://openshift.com
Бесплатный хостинг для WordPress
31. http://wordpress.com
32. http://infinityfree.net/wordpress-host...
33. http://x10hosting.com
34. http://biz.nf
35. http://freehostia.com
36. http://byethost.com
37. http://wopop.com
38. http://awardspace.com/wordpress-host...
39. http://pantheon.io
40. http://webfreehosting.net
Бесплатный хостинг для приложений Node.js
41. http://glitch.com
42. http://render.com
43. http://railway.app
44. http://heroku.com
45. http://vercel.com
46. http://kinsta.com
47. http://clever-cloud.com
48. http://fly.io
49. http://stormkit.io
50. http://deno.com
@WebDev_Plus
❤5👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Китайская компания 4dv запустила инструмент, который превращает обычные 2D-видео в полностью интерактивные 4D-видео.
Пока что это бета-версия, но на их сайте можно попробовать несколько демо-видео :)
@WebDev_Plus
Пока что это бета-версия, но на их сайте можно попробовать несколько демо-видео :)
@WebDev_Plus
❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Фантастическая библиотека анимаций для разработчиков на React Native
Она упрощает создание плавных и высокопроизводительных анимаций, а также добавление движения в ваш UI :)
Благодарю всех , кто поддерживает канал лайками✏️
https://github.com/software-mansion/react-native-reanimated
@WebDev_Plus
Она упрощает создание плавных и высокопроизводительных анимаций, а также добавление движения в ваш UI :)
Благодарю всех , кто поддерживает канал лайками
https://github.com/software-mansion/react-native-reanimated
@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11👎2
Копался я в исходниках MongoDB — и внезапно нашёл внутри инстанс Postgres с такой вот таблицей.
@WebDev_Plus
@WebDev_Plus
😁4🔥1
Как веб-разработчик, ты будешь использовать множество инструментов и фреймворков при создании сайтов и приложений.
И чтобы помочь тебе разобраться с ключевыми технологиями, Playback Press подготовил этот гайд.
В нём ты изучишь основы фронтенда и бэкенда: HTTP, Node, Express, JSON, Mongo, HTML, CSS, Web Components и React.
Ссылка: Animated Intro to Web Development
@WebDev_Plus
И чтобы помочь тебе разобраться с ключевыми технологиями, Playback Press подготовил этот гайд.
В нём ты изучишь основы фронтенда и бэкенда: HTTP, Node, Express, JSON, Mongo, HTML, CSS, Web Components и React.
Ссылка: Animated Intro to Web Development
@WebDev_Plus
🔥4❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Ищешь вдохновение для веб-дизайна?
Эта страница собирает лучшие идеи и тренды
Каждый день публикуются новые сайты для вдохновения:
→ http://godly.website
@WebDev_Plus
Эта страница собирает лучшие идеи и тренды
Каждый день публикуются новые сайты для вдохновения:
→ http://godly.website
@WebDev_Plus
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
Это страница из 200 строк, созданная с помощью обычного JavaScript:
Демо: http://pong-wars.vercel.app
Код: http://github.com/vnglst/pong-wars
@WebDev_Plus
Демо: http://pong-wars.vercel.app
Код: http://github.com/vnglst/pong-wars
@WebDev_Plus
❤5💯4🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Нашли бесплатный плагин для браузера — Font Tester
Он позволяет на любом сайте изменить шрифт (в базе свыше 1500 вариантов), настроить размеры и интервалы, чтобы проверить, какой вариант смотрится лучше.
@WebDev_Plus
Он позволяет на любом сайте изменить шрифт (в базе свыше 1500 вариантов), настроить размеры и интервалы, чтобы проверить, какой вариант смотрится лучше.
@WebDev_Plus
❤3
This media is not supported in your browser
VIEW IN TELEGRAM
Anime.js 4.2.0 вышел
Теперь все модули можно импортировать отдельно через под-пути, добавлена поддержка значений CSS-переменных, упростили Spring API с параметрами bounce и duration, стало больше встроенных easing-функций из WAAPI, а ещё появился редактор для easing-функций. И, конечно, куча фиксов и улучшений
@WebDev_Plus
Теперь все модули можно импортировать отдельно через под-пути, добавлена поддержка значений CSS-переменных, упростили Spring API с параметрами bounce и duration, стало больше встроенных easing-функций из WAAPI, а ещё появился редактор для easing-функций. И, конечно, куча фиксов и улучшений
@WebDev_Plus
❤5