WebDev+ | Веб-разработка
8.3K subscribers
507 photos
242 videos
10 files
702 links
Присоединяйтесь к нашему каналу и погрузитесь в мир веб-разработки

Связь: @devmangx
Download Telegram
Сайты бесплатного хостинга.

Общие платформы бесплатного хостинга

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
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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍11👎2
Копался я в исходниках MongoDB — и внезапно нашёл внутри инстанс Postgres с такой вот таблицей.

@WebDev_Plus
😁4🔥1
Как веб-разработчик, ты будешь использовать множество инструментов и фреймворков при создании сайтов и приложений.

И чтобы помочь тебе разобраться с ключевыми технологиями, Playback Press подготовил этот гайд.

В нём ты изучишь основы фронтенда и бэкенда: HTTP, Node, Express, JSON, Mongo, HTML, CSS, Web Components и React.

Ссылка: Animated Intro to Web Development

@WebDev_Plus
🔥42
This media is not supported in your browser
VIEW IN TELEGRAM
Ищешь вдохновение для веб-дизайна?

Эта страница собирает лучшие идеи и тренды

Каждый день публикуются новые сайты для вдохновения:

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
5💯4🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
Нашли бесплатный плагин для браузера — Font Tester

Он позволяет на любом сайте изменить шрифт (в базе свыше 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
5
This media is not supported in your browser
VIEW IN TELEGRAM
Эта ошибка в HTML убивает пользовательский опыт

Не использовать атрибут inputmode в своих <input>.

Атрибут подсказывает браузеру, какую клавиатуру открыть:
"numeric", "email", "tel", "url"...

Работает и на Android, и на iOS, и сильно прокачивает UX.

@WebDev_Plus
11
This media is not supported in your browser
VIEW IN TELEGRAM
Blend mode — одна из моих любимых CSS-свойств

Использую его в своём следующем шаблоне для @framer, чтобы меню и логотип всегда оставались видимыми 👀

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
This media is not supported in your browser
VIEW IN TELEGRAM
В CSS теперь можно использовать конструкцию :nth-child(... of ...), чтобы выбирать n-й элемент только среди определённых селекторов.

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

✔️ Поддержка в браузерах уже почти всеобщая — около 93%

@WebDev_Plus
Please open Telegram to view this post
VIEW IN TELEGRAM
10
Вышел React 19.2!

В обновлении появились: Activity, useEffectEvent, React Performance Tracks, частичный pre-rendering и другие фичи.

Список всего, что вошло в этот выпуск, можно найти в анонсе React 19.2 в блоге: https://react.dev/blog/2025/10/01/react-19-2

@WebDev_Plus
2
This media is not supported in your browser
VIEW IN TELEGRAM
clip-path реально недооценён.

С его помощью можно обрезать элементы по любым формам

https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

@WebDev_Plus
2
API позиционирования якорей (anchor positioning API) в CSS берет на себя всю «магическую» работу по размещению тултипов.

Не нужно никаких ухищрений с JS.

Более того, тултип можно автоматически «переворачивать», чтобы он не вылезал за пределы экрана — для этого используется position-try.

Подробнее об этом можно прочитать здесь

@WebDev_Plus
3
This media is not supported in your browser
VIEW IN TELEGRAM
Вам сложно создавать дизайн для своих сайтов или приложений?

Google выпустил приложение Stitch, которое генерирует пользовательский интерфейс с помощью искусственного интеллекта.

Это бесплатно, а результат впечатляет:

@WebDev_Plus
2
This media is not supported in your browser
VIEW IN TELEGRAM
При выравнивании иконок с текстом можно задать height: 1lh

Это значение соответствует line-height элемента, поэтому иконки выравниваются идеально.

@WebDev_Plus
👍4🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Быстрый совет, который стоило узнать раньше:

Если ваше приложение зависло (например, из-за бесконечного цикла или useEffect), просто откройте вкладку Sources в DevTools и нажмите Pause script execution. (остановить выполнение скрипта)

Браузер сразу покажет строку кода, из-за которой произошло зависание.

@WebDev_Plus
7
This media is not supported in your browser
VIEW IN TELEGRAM
Японцы с ThreeJS создают веб-страницы, которые поражают воображение:

Сайт - https://kokuyo.com/special/curiosity-is-life/.

Я понятия не имею, о чем он, но он очень милый.

@WebDev_Plus
👍51
This media is not supported in your browser
VIEW IN TELEGRAM
Есть среда разработки, в которой ты буквально можешь вставить работающий сайт и «снять» с него все медиа просто перетаскиванием — как это и должно быть.

Запомни: впервые ты увидел это в Unit.

@WebDev_Plus
4
This media is not supported in your browser
VIEW IN TELEGRAM
Реализовал этот эффект прокрутки с помощью threejs. Он основан на этом коде

@WebDev_Plus
6