ТТипичный Веб Разработчик

Типичный Веб Разработчик

@tipichnyj_web_razrabotchik🇷🇺 Русский📅 март 2026 г.

Добро пожаловать на канал о веб-разработке! Здесь вы найдете множество полезной информации о создании и развитии веб-сайтов, веб-приложений, а также о технологиях и инструментах, необходимых для успешной работы в этой области.

📊 Полная статистика📝 Все посты
178
Подписчики
261,6
Ср. охват
147%
Вовлечённость
20
Постов
~0.1
В день

Графики

📊 Средний охват постов

📉 ERR % по дням

📋 Публикации по дням

📎 Типы контента

Лучшие публикации

20 из 20
Ttipichnyj_web_razrabotchik
tipichnyj_web_razrabotchik
16 июл., 08:00

​​Как использовать адаптивные изображения в HTML? Рассмотрим типичный сценарий - в шапке каждого поста установлена картинка, для экрана компьютера она узкая и длинная, например 1200x200 пикселей, а для экрана смартфона 320x200 пикселей. Если использовать большую картинку и просто обрезать лишнее на экране смартфона, например с помощью object-fit, то получим низкую скорость загрузки страницы. Идеально иметь несколько версий изображения и загружать только одно для каждого устройства. Чтобы устрани...

👁 532
📊 Аналитика
Ttipichnyj_web_razrabotchik
tipichnyj_web_razrabotchik
11 июл., 08:00

​​Как отключить обновление страницы свайпом в мобильных браузерах? Обновление свайпом — популярная функция обновления страницы в мобильных браузерах. Однако в некоторых случаях мы хотели бы отключить это поведение по умолчанию. Сделать это можно с помощью свойства CSS overscroll-behavior. Как видно из названия, это свойство позволяет изменить поведение по умолчанию при чрезмерной прокрутке контейнера. Обновление свайпом можно отключить с помощью свойства CSS overscroll-behavior: body { overscrol...

👁 427
📊 Аналитика
Ttipichnyj_web_razrabotchik
tipichnyj_web_razrabotchik
6 янв., 23:16

Как вычислить разницу между датами в javascript? Представим что нам нужно вычислить разницу между двумя датами и показать результат в днях, часах, минутах и секундах. Можно воспользоваться специализированной библиотекой для работы со временем, например moment.js, или понять как это работает и написать свой код. Сначала вычислим разницу между двумя датами в секундах, пускай это будет 1 января и 20 февраля. Чтобы получить количество дней, делим общее количество секунд на количество секунд в сутках...

👁 359📷 photo
📊 Аналитика
Ttipichnyj_web_razrabotchik
tipichnyj_web_razrabotchik
8 июл., 13:00

​​Ускоряем написание HTML разметки с помощью Emmet в VSCode Emmet - это утилита, которая позволяет значительно ускорить ваш рабочий процесс с HTML. Просто введите любой тег без <> и нажмите TAB, в результате получите полноценную HTML разметку с обязательными атрибутами и закрывающим тегом. Рассмотрим популярные сокращения: 1. Вводим ! и нажимаем TAB, далее происходит магия и мы получаем разметку целой страницы. 2. Вводим html, получаем: <html> 3. Добавляем несколько братских элементов - h1+h2+p+...

👁 325
📊 Аналитика
Ttipichnyj_web_razrabotchik
tipichnyj_web_razrabotchik
6 июл., 10:34

Как анимировать меню c React Transition Group? Простая анимация меню на основе библиотеки React Transition Group за несколько минут. Ссылки: - YouTube | Дзен - Дока React Transition Group - Github Pet Project Типичный Веб Разработчик

👁 295
📊 Аналитика
Ttipichnyj_web_razrabotchik
tipichnyj_web_razrabotchik
6 июл., 08:00

Ошибки при копировании объектов в JavaScript. И снова простая, на первый взгляд, задача имеет подводные камни о которых мало кто задумывается. Копирование объектов, что может быть проще: const someItemList = [ { name: 'Product 1', value: 'Some value 1' }, { name: 'Product 2', value: 'Some value 2' }, ] const newItemList = [...someItemList] Существует два типа копирования - поверхностное и глубокое. Первое работает быстро, и обычно его вполне достаточно, проблемы начинаются при копировании вложен...

👁 252
📊 Аналитика
Ttipichnyj_web_razrabotchik
tipichnyj_web_razrabotchik
24 мая, 10:24

Создаем игру головоломку Пятнашки на ReactJS. Веб разработка это не только скучная верстка, валидация форм или работа с API. Давай отвлечемся от всего этого и создадим простую и очень увлекательную игру Пятнашки. Видео с пошаговым созданием игры и исходный код прилагаются. Ссылки: - Youtube | Дзен | VK Видео | RuTube - Github Pet Progect - Demo - играть онлайн Типичный Веб Разработчик

👁 250
📊 Аналитика
Ttipichnyj_web_razrabotchik
tipichnyj_web_razrabotchik
7 июн., 12:09

Как вписать изображение <img> в контейнер? В идеальных условиях разработчик просто берет картинку и она всегда точно встает в вёрстку. Но в реальности все не так. Как правило, картинки всегда имеют разные пропорции сторон. Существует множество "костылей" чтобы вписать изображение, например с помощью flex-box или position + transform, или, например, background-image: <style> .card { width: 100px; height: 100px; background-image: url(./images/logo.png); background-size: contain; background-positio...

👁 250
📊 Аналитика
Ttipichnyj_web_razrabotchik
tipichnyj_web_razrabotchik
26 мая, 15:04

Что такое CSS em и для чего они нужны? Самая понятная и простая единица измерения в CSS это пиксель px. Сколько не меняй размеры окон или блоков, пиксель всегда остается пикселем. А что если нам нужно задать размер шрифта или отступы относительно родителя. В таких случаях используют относительные единицы em: .parent { font-size: 20px; } h1 { font-size: 2em; } p { font-size: 0.75em; } <div class="parent"> Родительский компонент с размером шрифта 20px <h1>Заголовок с размером шрифта 40px</h1> <p>Т...

👁 242📷 photo
📊 Аналитика
Ttipichnyj_web_razrabotchik
tipichnyj_web_razrabotchik
3 июн., 16:24

Используем Хук useRef для хранения переменных. Мы привыкли использовать useRef как ссылку на DOM элемент. Обычно это выглядит примерно так: const buttonRef = useRef(null); return <button ref={buttonRef}>Button text</button> Таким образом можем получить размер элемента, установить фокус и так далее. Другой вариант использования useRef - хранение любых данных, например переменной: const someRef = useRef(5); console.log(someRef.current) // 5 Хук возвращает объект со свойством current, в котором хра...

👁 230
📊 Аналитика

Типы хуков

Вопрос12 | 281 просм.
Нейтральный8 | 233 просм.

Длина постов

Очень длинные (1000+)8 | 284 просм.
Длинные (500-1000)7 | 254 просм.
Средние (200-500)5 | 236 просм.

Типы контента

📝
14
text
272 просм.
📷
6
photo
238 просм.