Мир сегодня с "Юрий Подоляка"
Мир сегодня с "Юрий Подоляка"
Просмотреть
Труха⚡️Україна
Труха⚡️Україна
Просмотреть
Николаевский Ванёк
Николаевский Ванёк
Просмотреть
Труха⚡️Україна
Труха⚡️Україна
Просмотреть
Николаевский Ванёк
Николаевский Ванёк
Просмотреть
Лёха в Short’ах Long’ует
Лёха в Short’ах Long’ует
Просмотреть
Веб-страница avatar

Веб-страница

Всё по фронтенду, бэкенду и девопсу в одном месте
Разместить рекламу: @tproger_sales_bot
Правила общения: https://tprg.ru/rules />Другие каналы: @tproger_channels
Сайт: https://tprg.ru/site />Регистрация в перечне РКН: https://tprg.ru/64ai
Рейтинг TGlist
0
0
ТипПубличный
Верификация
Не верифицированный
Доверенность
Не провернный
РасположениеРосія
ЯзыкДругой
Дата создания каналаЧерв 14, 2019
Добавлено на TGlist
Трав 23, 2024
Я владелец канала
История изменений
Прикрепленная группа
Веб-чат
Веб-чат
49
Подробнее

Рекорды

22.08.202423:59
27.4K
Подписчиков
08.02.202507:48
50
Индекс цитирования
22.05.202423:59
3.1K
Охват одного поста
23.01.202523:59
2.6K
Охват рекламного поста
01.06.202423:59
4.67%
ER
23.01.202523:59
9.81%
ERR

Популярные публикации Веб-страница

Все посты
Переслал из:
Точка входа в программирование avatar
Точка входа в программирование
25.02.202520:02
Ликбез про компьютерным сетям 💬

Сейчас почти в каждой вакансии требуется знание сетей. В этом видео автор рассказывает про базовые сетевые технологии, чтобы вы могли применять эти знания в работе, на собеседованиях, в пет-проектах и обучении. Конечно же в ролике будет шутка про TCP и UDP.

Таймкоды:

0:00 - Вступление
0:38 - Зачем знать сети?
1:48 - OSI/ISO - TCP/IP
8:19 - MAC-адрес
9:35 - IP-адрес
10:48 - Порты
11:50 - Маски и подсети
13:34 - Белые и серые подсети
14:41 - NAT network address translation
15:54 - Чем отличается TCP и UDP?
18:03 - Как работает DNS?
19:09 - Траблшутинг
20:34 - О чем не поговорили, но тоже очень важно

#сети #видео
14.02.202507:37
Как правильно работать с DOM в JavaScript в 2025 году?

Работа с DOM (Document Object Model) — это основа веб-разработки. С каждым годом появляются новые, более эффективные способы манипуляции элементами страницы. Давайте разберём, как сегодня правильно работать с DOM в JavaScript, чтобы код был быстрым, удобным и безопасным.

1. Получение элементов

Вместо старых getElementById и getElementsByClassName сегодня лучше использовать querySelector и querySelectorAll. Они более универсальные и понятные.

const title = document.querySelector("#title"); // Получает 1 элемент (по id)


querySelector и querySelectorAll позволяют находить элементы так же, как в CSS (.класс, #id, input[type="text"] и т. д.). А также querySelectorAll возвращает не «живую» коллекцию, а обычный статичный список (NodeList), что логичнее при итерации.

2. Изменение текста и HTML

Всё зависит от того, что именно нужно поменять.

textContent — если надо изменить только текст (без HTML).

title.textContent = "Привет, мир!";


Не используйте innerHTML, если вставляете данные от пользователя — это дыра в безопасности (XSS-атаки). Если всё же используется innerHTML, убедитесь, что данные проверены.

title.innerHTML = "


insertAdjacentHTML — отличная альтернатива innerHTML, если нужно добавить HTML в определённое место, не перезаписывая весь элемент.

title.insertAdjacentHTML("beforeend", "


3. Изменение классов

Правильный способ через classList, потому что `className`заменяет все классы сразу, из-за чего можно случайно удалить важные стили.

title.classList.add("highlight"); // Добавит класс


4. Изменение стилей

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

title.style.color = "red";


Если нужно много стилей — лучше добавьте или измените класс. Так проще, централизованно и удобнее управлять дизайном.

title.classList.add("error"); // В CSS заранее определите .error { color: red; }


5. Создание и добавление новых элементов

Лучший способ — использовать createElement, а не innerHTML.

const newDiv = document.createElement("div"); // Создаём элемент


Если нужно добавлять элементы в разные места:

appendChild() — добавляет в конец родителя.

prepend() — добавляет в начало.

before() и after() — добавляют перед или после элемента.

title.after(newDiv); // Вставит newDiv сразу после title


6. Удаление элементов

Самый актуальный способ — remove().

newDiv.remove(); // Удалит элемент из DOM


Раньше приходилось делать так (и это было неудобно):

newDiv.parentNode.removeChild(newDiv); // Старый подход


7. Обработчики событий (современный подход)

Раньше часто использовали`onclick`, но перезаписывает предыдущие обработчики и плохо управляется. Лучше используйте addEventListener.

const button = document.querySelector("#myButton");


Мы рассказали только часть советов. Если знаете что-то ещё важное, о чем мы не рассказали тут, поделитесь в комментариях.

#простымисловами #фронтенд
Post media background
Post media
05.02.202504:11
Жидкие кнопки для вашего сайта

Подборка из шести кнопок, с которыми пользователю будет интересно взаимодействовать даже до момента нажатия на них. Сделаны на связке HTML + SCSS + JavaScript.

Посмотреть код и забрать их к себе в проект можно тут:

https://codepen.io/Zaku/pen/eRmRxz

#codepen #ui #фронтенд
Post media background
Post media
13.02.202519:11
Frontend Stuff

Это постоянно расширяющийся список фреймворков, библиотек и инструментов, которые вы можете использовать для создания веб-приложений. В каталоге вы найдёте описание огромного количества инструментов со ссылками на них. Для удобства инструменты отсортированы по категориям.

#инструменты #фронтенд #github
Post media background
Post media
10.02.202519:05
Напоминание, что @scope и блоки стилей HTML — это мощное сочетание

Кто понял, тот понял. А кто всё ещё не может разобраться о чём идёт речь и что это за @scope вообще такой, то скорее переходите по ссылке и читайте подробности этого подхода стилизации HTML-элементов.

#фронтенд #html #css
09.02.202520:47
Хватит обижать джаваскриптеров!

Вы же наверняка видели, а возможно и участвовали, в этих срачах дискуссиях по поводу того, какой язык лучше. И самыми частыми аргументами против JS являются слабая типизация, «непредсказуемое» поведение при сложении разных типов и прочее подобное.

Но ведь на самом деле всё это есть и в некоторых других языках в том или ином виде. Более того, все эти «недостатки» могут быть и преимуществами в некоторых ситуациях.

Подробнее обо всём этом можно размышляют в коротком, но интересном ролике.

#видео #javascript
Post media background
Post media
14.02.202506:31
Динамические layout с Vue jsx: руководство по созданию гибких и удобных в обслуживании пользовательских интерфейсов

Вы когда-нибудь часами настраивали один и тот же layout на нескольких страницах или пытались адаптировать пользовательский интерфейс к изменяющимся данным, чтобы он не ломался? Эти распространённые проблемы могут замедлить процесс разработки и привести к созданию кода, в котором легко допустить ошибку.

Динамические layout решают это проблему и упрощают создание адаптивных интерфейсов. Как их создавать и какими особенностями они обладают, рассказали в этой статье.

#vue #фронтенд
Post media background
Post media
14.02.202516:14
Выражаем свои чувства на языке LoveScript

Ребята из команды поиска и рекламных технологий Яндекса запустили спецпроект «День программиста Валентина», в котором валентинку можно сделать своими руками.

Вы можете написать код на LoveScript — специальном языке программирования для выражения тёплых и романтических чувств, и получить открытку, которую можно сохранить и поделиться с близкими.

Есть и более простой мод — выбирайте сообщение, фон и цвет вручную и получайте свой уникальный результат.

С днём программиста Валентина!

Это #партнёрский пост
14.02.202511:00
Челлендж по запуску 12 простых IT-проектов за 12 месяцев

Летом 2023 г. появилось комьюнити инди-хакеров, в котором ребята решили запускать один простой продукт в онлайне каждый месяц.

И в реальном времени показывать: как разрабатывают, продвигают и сколько получилось заработать на запусках таких микро-проектов. Держите подборку их кейсов:

— пост про то, почему американцы платят $40 за простой конвертер картинок, который сделали за 4 недели, несмотря на обилие бесплатных аналогов.

— пост про то, как за 2 недели запустили темную тему с тарифами от $5 до $99. Четыре таких продукта приносят на пассиве как ЗП среднего разработчика.

— пост про то, как все может грустно закончиться, если 2 года пилить сложный продукт, не показывая его рынку.

— пост про то, как заработали 1,7 млн рублей на боте для создания фотокниг и какие фейлы допустили.

Первая находка в их комьюнити IT-билдеров — метод, который позволяет сделать запуск за 1 месяц.

Вторая находка — метод продвижения, который они используют. В среднем на продвижение одного IT-продукта уходит $150, причем есть продукты с 200К+ юзеров.

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

Реклама. Рекламодатель: ИП Зуев Игорь Владимирович ИНН 360408359441, erid: 2W5zFJ6HzCG
Post media background
Post media
14.02.202517:43
А ваши родители случайно не фронтенд-разработчики? Тогда откуда у них такой стильный Child Node?

К 14 февраля мы с командой сделали бота, который будет отправлять вашим вторым половинкам или просто хорошим людям айтишные и не только комплименты.

Если давно хотели написать такого сами и добавить свои комплименты, чекайте код и пошаговый гайд в нашей статье. А если нет, то отправляйте нашего бота поздравляйте своих булочек!
Войдите, чтобы разблокировать больше функциональности.