WebDEV
8.23K subscribers
2.34K photos
27 videos
3.08K links
Сообщество веб-разработчиков.

На канале можно найти: видео-уроки, полезные статьи, новости из мира IT и веб-разработки.

Ссылка: @Portal_v_IT

Сотрудничество: @oleginc

Канал на бирже: telega.in/c/webb_dev
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Классная находка для веб-разработчиков

Cursor Effects — набор ретро-эффектов курсора с кучей вариаций. Бесплатно, open source, и встраивается в проект буквально за пару строк кода.

Мгновенно добавляет сайту креатива и выделяет его среди остальных :)

➡️ Ссылка на Github

WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Как работает DNS?

Если вы веб-разработчик или DevOps-инженер, важно понимать, что происходит, когда вы вводите в браузере https://website.com и нажимаете Enter.

Первое, что нужно сделать, — это перевести текстовый домен в машинный числовой IP-адрес. Этим занимается DNS-сервер, который работает как телефонная книга в интернете.

Под капотом участвуют четыре типа серверов: recursive resolver, root name server, TLD name server и authoritative name server.

1. DNS Resolver

Когда вы вводите https://website.com, запрос сначала отправляется на DNS Resolver. Этот сервер общается с другими DNS-серверами, чтобы найти нужный IP-адрес.

2. Root Name Server

DNS Resolver обращается к Root-серверам (их 13), которыми управляют разные организации и делегированы ICANN. Они обрабатывают запросы для TLD (доменных зон верхнего уровня).

Если Root-сервер не находит запись в своих зонах, он указывает на сервер имен для нужного TLD, например .com.

3. TLD Server

Далее DNS Resolver опрашивает TLD-сервер, который возвращает IP авторитетного сервера домена.

4. Authoritative Name Server

После запроса к авторитетному серверу домена тот возвращает IP адрес исходного сервера. На финальном этапе DNS Resolver передаёт этот IP клиенту, и браузер использует его, чтобы загрузить страницу.

Кэширование

Чтобы ускорить загрузку, DNS-записи могут храниться в кэше на разных уровнях:

- браузер,
- ОС,
- роутер,
- провайдер.

Если IP есть в кэше, поиск через DNS Resolver не выполняется, что экономит время.

Подробнее: Что происходит, когда вы вводите URL

WebDev // IT & Чат
This media is not supported in your browser
VIEW IN TELEGRAM
Разработчики тратят на чтение кода больше времени, чем на его написание

Вот лайфхак:

I. Открой любой репозиторий
II. Замени .com на .dev в URL
III. Просматривай код прямо в VS Code

WebDev // IT & Чат
Git & GitHub Command Cheat Sheet

🔸Базовый рабочий процесс

- git init — Инициализировать новый Git-репозиторий
- git clone [url] — Склонировать проект с GitHub
- git add [file] — Добавить конкретный файл в staged
- git add . — Добавить все изменения в staged
- git commit -m "сообщение" — Зафиксировать staged изменения
- git push origin [branch] — Отправить коммиты на удалённый репозиторий
- git pull origin [branch] — Получить последние изменения

🔸Работа с ветками

- git branch — Список всех веток
- git branch [name] — Создать новую ветку
- git checkout [branch] — Переключиться на ветку
- git merge [branch] — Слить ветку с текущей
- git branch -d [branch] — Удалить ветку локально
- git push origin --delete [branch] — Удалить ветку на удалённом репозитории

🔸История коммитов

- git log --oneline — Краткая история коммитов
- git log --graph --oneline --all — Визуальная история с ветками
- git show [commit] — Показать изменения конкретного коммита
- git diff — Показать несохранённые изменения
- git diff --staged — Показать staged изменения
- git blame [file] — Кто и когда изменял каждую строку

🔸Отмена изменений

- git reset --soft HEAD^ — Отменить коммит, оставить изменения в staged
- git reset --hard HEAD^ — Полностью удалить последний коммит
- git checkout -- [file] — Отменить изменения в рабочей директории
- git revert [commit] — Создать новый коммит, который отменяет изменения
- git clean -fd — Удалить неотслеживаемые файлы и папки

🔸Сотрудничество на GitHub

- git fork — Создать личную копию репозитория
- git remote add upstream [url] — Добавить оригинальный репозиторий как upstream
- git fetch upstream — Получить обновления с оригинального репозитория
- git push -u origin [branch] — Отправить ветку и привязать её к upstream
- git pull --rebase upstream main — Обновить fork через rebase

🔸Stash и очистка

- git stash — Временно сохранить изменения
- git stash pop — Восстановить последний stash
- git stash list — Просмотреть все stash
- git stash drop — Удалить последний stash
- git prune — Удалить недостижимые объекты

🔸Теги и релизы

- git tag [name] — Создать легковесный тег
- git tag -a [version] -m "сообщение" — Создать аннотированный тег
- git push origin --tags — Отправить теги на удалённый репозиторий
- git tag -d [name] — Удалить локальный тег
- git push origin --delete tag [name] — Удалить тег на удалённом репозитории

🔸Продвинутые инструменты

- git bisect — Бинарный поиск коммита с багом
- git rebase -i [commit] — Интерактивный rebase (правка истории)
- git cherry-pick [commit] — Применить конкретный коммит к текущей ветке
- git reflog — Показать журнал ссылок (инструмент восстановления)
- git worktree add — Добавить дополнительную рабочую директорию

🔸Конфигурация

- git config --global user.name "Имя" — Установить глобальное имя пользователя
- git config --global user.email "email" — Установить глобальный email
- git config --global core.editor "code --wait" — Сделать VS Code редактором по умолчанию
- git config --global alias.co checkout — Создать алиас для команды
- git config --list — Показать все настройки Git

WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Топ-ресурс для изучения алгоритмов программирования. Пошагово объясняет их, с кодом и в визуальном, наглядном виде.

Более 70 алгоритмов на JavaScript, Java и C++:

➡️ http://algorithm-visualizer.org

WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Чем заменить Claude Code в России: китайские ИИ вместо западных сервисов

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

На бесплатном практикуме Кирилл Пшинник, CEO Университета Зерокодера, покажет, как работать с китайскими ИИ ZCode и DeepSeek Harness на практике: от создания сайтов до аналитики и автоматизации задач.

Что ждет вас на практикуме?

• Собрать дашборд с графиками и выводами из таблицы;
• Создать лендинг с формой заявки по текстовому описанию;
• Получить 3D-модель, просто описав объект словами;
• Начать работать из России без блокировок и обходных путей.

Также сравним китайские инструменты с Claude Code и Codex, разберем их возможности, ограничения и то, что действительно доступно бесплатно.

Бонус: сборник из 30 идей для вайбкодинга, доступ к закрытой базе ИИ-решений и гайды по установке китайских ИИ из РФ.

Бесплатная регистрация по ссылке.
Векторные базы данных: простым языком про устройство и принцип работы

В данной статье мы пройдём путь от простого вектора до целой рекомендательной системы, пробежимся по основным фишкам и внутреннему устройству.


➡️ Читать статью

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Всем программистам посвящается!

Вот 14 авторских обучающих IT каналов по самым востребованным областям программирования:

Выбирай своё направление:

👩‍💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
👩‍💻 IT Новости — t.me/it_ready
🤖 AI & ML — t.me/neuro_ready
👩‍💻 Frontend — t.me/frontend_ready
👩‍💻 C/C++ — https://t.me/cpp_ready
👩‍💻 C# & Unity — t.me/csharp_ready
👩‍💻 Linux — t.me/linux_ready
👩‍💻 Java — t.me/java_ready
📖 IT Книги — t.me/books_ready
📱 JavaScript — t.me/javascript_ready
🖼️ DevOps — t.me/devops_ready
🖥 Design —t.me/design_ready

📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Идеальный SEO-инструмент для веб-разработчиков

Он позволяет мгновенно проверить, имеют ли доступ к вашему сайту Google-боты и AI-краулеры.

Просто введите адрес сайта — и инструмент прогонит несколько проверок, чтобы дать детальный инсайт о crawlability и accessibility.

Лёгкий способ убедиться, что ваш сайт оптимизирован под поисковые системы и AI-платформы :)

➡️ crawlercheck.com

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
Верстка простого сайта для новичков

Вёрстка сайта Burger Landing из Figma с самого нуля с очень подробными объяснениями каждого действия. Данный макет подойдёт для новичков. Верстка сайта позволит нам попрактиковать знания html, css, бэм, адаптив, а также положить такой прекрасный макет в портфолио.

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Паттерн BFF (бэкенд для фронтенда): преимущества, недостатки и лучшие практики для реализации

Если вы хотите стать настоящим мастером API, то вам обязательно нужно знать о паттерне BFF и как его использовать.


➡️ Читать статью

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Топ-ресурс для изучения алгоритмов программирования. Пошагово объясняет их, с кодом и в визуальном, наглядном виде.

Более 70 алгоритмов на JavaScript, Java и C++:

➡️ http://algorithm-visualizer.org

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1👍1
Spline | Tilda эффект частиц

В этом видео я показываю инструмент spline. Узнаете как в нём работать и как сделать красивый эффект частиц. После чего поставим его на сайт в Тильде.

Spline — это недавно появившийся бесплатный инструмент для 3D моделирования, который уже успел обзавестись впечатляющим набором функций. С его помощью вы можете создавать 3D-сцены, моделировать объекты и редактировать материалы, а также контролировать весь процесс создания дизайна, добиваясь наилучшего результата.

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Команды "git merge" и "git rebase": преимущества, недостатки и ключевые различия

Один из ключевых аспектов работы с системой контроля версий Git — перенос изменений из одной ветки в другую. Для этого существует два основных инструмента: git merge и git rebase.


➡️ Читать статью

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
PHP Laravel пакет для удобной работы с запросами

Один из моих любимых пакетов от Spatie — laravel-query-builder

С его помощью можно строить eloquent-запросы прямо из API-запросов. Пакет умеет:

- Сортировать
- Фильтровать
- Подгружать связи

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Фронтенд дорожная карта

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
Как поймать и обезвредить проблемные запросы в PostgreSQL?

Казалось бы, раньше всё работало неплохо, но стоило клиентской базе вырасти в пять раз, как всё замедлилось. Знакомая ситуация?


➡️ Читать статью

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN 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 // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
Семантика, семантическая верстка

Друзья, миллион споров, разговоров, качелей, когда люди говорят про семантику, иногда это заходит до фанатизма и светлой веры в теги как в религию, а в семантическую верстку как в институт. В этом видео мы поговорим про семантику, посмотрим справочники и самое главное семантически сверстаем сайтец.

➡️ Смотреть видео & Скачать видео

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM