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

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

Ссылка: @Portal_v_IT

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

Канал на бирже: telega.in/c/webb_dev
Download Telegram
Доменные имена и что они реально значат

Расширение домена — это не просто случайное окончание. Оно формирует идентичность сайта, влияет на доверие и даже играет роль в SEO. Краткий гайд, чтобы выбирать осознанно

.com → коммерция, самое популярное и надёжное

.net → сети и тех-бизнес

.edu → образовательные учреждения

.org → некоммерческие организации

.mil → сайты армии

.gov → госструктуры

.info → информационные порталы

.arpa → интернет-инфраструктура

.int → международные организации

.mobi → сайты для мобилок

.travel → туризм и путешествия

.jobs → работа и карьера

.ca → Канада

.coop → кооперативы и объединения


Совет: правильный домен повышает доверие, улучшает позиции в поиске и сразу даёт понять пользователям, о чём твой сайт.

WebDev // IT & Чат
❤2👍1
💡 Шпаргалка по JavaScript

WebDev // IT & Чат
❤3🔥1
Дизайн ошибки 404

Разрабатываем дизайн 404 страницы ошибки для туристического сайта про Мальдивы в Фотошопе и Фигме.

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

WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Ресурс для программистов, позволяющий создавать изометрические диаграммы вашей инфраструктуры или программного обеспечения.

➡️ Github

WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
💡 Шпаргалка по HTML и CSS

WebDev // IT & Чат
👍1
HTML и CSS антипаттерны

При изучении разных ЯП всегда есть практики, которым не рекомендуется следовать — это очень сильно помогает разработчикам избегать ошибок.

👉 Так как HTML и CSS не относятся к языкам программирования, найти инфу по антипаттернам достаточно тяжело. Автор этой статьи собрал несколько примеров, которые лично относит к антипаттернам.


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

WebDev // IT & Чат
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Топ-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 идей для вайбкодинга, доступ к закрытой базе ИИ-решений и гайды по установке китайских ИИ из РФ.

Бесплатная регистрация по ссылке.