WebDEV
8.24K subscribers
2.33K photos
27 videos
3.07K links
Сообщество веб-разработчиков.

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

Ссылка: @Portal_v_IT

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

Канал на бирже: telega.in/c/webb_dev
Download Telegram
Топ-10 браузерных расширений для разработчиков

🔴JSON Formatter
Форматирует JSON в дерево, удобно читать данные API.

🔴Wappalyzer
Позволяет увидеть, какие технологии использует сайт.

🔴Fake Filler
Автоматически заполняет формы фейковыми данными, ускоряя тестирование.

🔴Clear Cache
Быстро очищает кэш браузера для проверки новых версий сайта.

🔴Talend API Tester
Дает возможность визуально работать с API и тестировать их.

🔴Focus To-Do
Повышает продуктивность, отслеживая задачи с таймером Pomodoro.

🔴Lighthouse
Позволяет быстро проверить производительность и доступность сайта.

🔴Cookie Editor
Позволяет быстро создавать, редактировать и удалять куки для тестов и отладки.

🔴Web Developer
Добавляет дополнительные инструменты для инспекции и отладки сайта.

🔴Dark Reader
Переводит сайты в тёмную тему, снижая нагрузку на глаза.


WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS

Не нужно готовить отдельные версии логотипа в градациях серого для тёмной и светлой темы.

Это легко делается с помощью CSS-фильтров.

/* Для светлой темы */
.logos-container img {
filter: brightness(0);
opacity: 0.6;
}

/* Для тёмной темы */
.logos-container img {
filter: invert(1) saturate(0) brightness(4);
opacity: 0.6;
}


То есть, не нужно хранить отдельные изображения для светлого и тёмного режима — фильтры решают эту задачу.

WebDev // IT & Чат
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь добавить AI-чатботов в проекты на React?

Есть опенсорсная библиотека для React, которая позволяет быстро собирать свои чатботы. Её можно подключить к разным LLM, включая OpenAI и другие.

Поддерживает кучу кастомизаций, темы и гибкие настройки.

Где пригодится:

- поддержка пользователей прямо в приложении
- встроенные AI-ассистенты
- эксперименты с интеграцией LLM

➡️ Установка: npm install react-chatbotify

react-chatbotify.com

WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
АЙТИШНИКИ БЕСПЛАТНОЕ ОБУЧЕНИЕ

Проект «Terminal» стал крупнейшей библиотекой бесплатного образования. В одном канале собраны курсы, книги, полезные инструменты и практические тренажёры для всех разработчиков:

• Практические курсы и задания
• Книги и статьи известных авторов
• Полезные инструменты и ресурсы
• IT-новости и инсайды

Обучение по всем направлениям: SQL, Python, ML, Frontend, PHP, C++, Go, Git, Linux, QA, Java, Vibe-coding, InfoSec и др.

⌨️ подписаться
Please open Telegram to view this post
VIEW IN TELEGRAM
Объяснение верстки простого сайта HTML + CSS

Часовой урок, в котором автор объясняет, как сделать верстку несложного сайта. Все понятно и несложно.

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

WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Типы ввода HTML

WebDev // IT & Чат
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь аккуратные, пиксельно-точные SVG-флаги стран?

Есть отличный ресурс с коллекцией профессионально прорисованных флагов. Можно просто скопировать SVG-код и сразу вставлять в проект.

Идеально подходит для веб-разработчиков и дизайнеров, которые ценят качество и скорость.

Источник : nucleoapp.com/svg-flag-icons

WebDev // IT & Чат
👍1
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://xn--r1a.website/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
Паттерн BFF (бэкенд для фронтенда): преимущества, недостатки и лучшие практики для реализации

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


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

📢 WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
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