Загружаем канал…
Мы используем файлы cookie для работы сайта и аналитики посещаемости. Подробнее в Политике обработки данных и Правилах.
Канал в MAX
Канал: «Веб Мастерская» — авторский канал Сергея Абрамова и Студии Сергея Абрамова. Практический подход к веб-разработке «из мастерской» — реальные кейсы, живые разборы, без воды. Не теория из учебников, а то, что реально работает в продакшене. По всем вопросам обращайтесь на почту: i@yourwriter.ru
HTML Привет, коллеги! 👋 Сегодня в мастерской разбираем тег, который 90% новичков просто слепо копируют из шаблона, не понимая, как он работает. Речь о <meta name="viewport">. 🛠 Зачем он нужен? Без него мобильный браузер думает, что вы открыли десктопный сайт, сжимает его до ширины ~980px и показывает «мыльный» текст, который нужно зумить пальцами. Вьюпорт говорит браузеру: «Эй, мы на мобилке, адаптируй ширину под экран!». 💻 Эталонная строка: <meta name="viewport" content="width=device-width, initial-scale=1.0"> 🔍 Разбираем параметры: • width=device-width — ширина страницы равна ширине экрана устройства. (Если у вас iPhone 390px, то и страница будет 390px, а не 980px). • initial-scale=1.0 — начальный масштаб 1:1. Никакого автоматического уменьшения текста при загрузке. 💡 Со…
Читать целикомБАЗА: 🔨 Почему уметь писать код ПЛОХО — это суперсила, о которой молчат на курсах Слышал когда-нибудь от ментора: «Пиши чистый код, соблюдай SOLID, думай о паттернах!»? Конечно слышал. И это правильный совет. Но неполный. Знаешь, что в реальной мастерской происходит, когда заказчик звонит в пятницу в 18:00 и говорит: «Сайт лежит, нам завтра запускать рекламу на 200 тысяч»? Ты не садишься рефакторить архитектуру. Ты не пишешь тесты. Ты берёшь молоток, проволоку, изоленту и чинишь быстро. Грязно. Но сайт работает, реклама крутится, клиент счастлив, деньги не сгорели. 🧠 Вот где зарыта собака. Есть огромная разница между: ❌ «Я не умею писать чисто, поэтому мой код — спагетти» ✅ «Я УМЕЮ написать чисто, но прямо сейчас осознанно выбираю быстрое решение» Первое — это неумение. Второе …
Читать целикомДобро пожаловать в «Веб Мастерскую»! Привет! Я Сергей Абрамов — веб-разработчик и основатель Студии Сергея Абрамова. А это — моя мастерская. Без пафосных конференц-залов, без «успешного успеха» и без воды на 40 минут. Здесь пахнет свежим кодом, горячим кофе и иногда — горящими дедлайнами. 😄 Что тут будет? 🔨 Реальные кейсы из продакшена — не «представим, что у нас интернет-магазин», а «вот клиент, вот ТЗ на 3 строчки, вот как мы это разгребали». 🔍 Живые разборы — код, архитектура, грабли. Показываю не только «как надо», но и «как я сначала сделал неправильно и почему». 💡 Практические решения — PHP, JS, HTML/CSS, MySQL, фреймворки, хостинг, деплой. То, что реально используется в работе, а не в учебниках 2009 года. 🗣 Честные разговоры — про фриланс, заказчиков, оценки сроков, синдр…
Читать целикомДАЙДЖЕСТ НЕДЕЛИ: Привет, коллеги! Сергей на связи. Наливайте кофе, сейчас расскажу, что тут в нашем цеху за неделю натворили. Поехали 👇 1️. WordPress 7.1 Beta 2 — уже в печи 22 июля выкатили Beta 2. Главный фокус — асинхронная загрузка блоков и responsive styling, который наконец-то можно потестить. Релиз запланирован на 19 августа, аккурат к WordCamp US в Финиксе. Если сидите на WP — самое время глянуть, что там под капотом шуршит, пока не прилетело на прод. 2️. Chrome обновился, а CSS снова откусил кусок у JS 22 июля прилетел Early Stable Update для десктопа. А главное — Chrome 146/147 окончательно довели до ума scroll-driven animations, anchor positioning и popover API. То, что раньше писалось на 50 строк JS с IntersectionObserver — теперь 5 строк чистого CSS. JavaScript для UI-…
Читать целикомКЕЙС: Привет, коллеги! 👋 Сегодня в «Веб Мастерской» устраиваем археологические раскопки. Заказчик принес проект, который, судя по всему, писался еще во времена, когда PHP 5.4 считался передовым краем технологий. Спойлер: это был классический спагетти-код, где бизнес-логика, верстка и SQL-запросы были перемешаны в одном файле, как макароны с фрикадельками. Задача звучала амбициозно: перенести этого "монстра" на актуальный PHP 8+. Главные боли, с которыми столкнулись: 1. Функции mysql_. Классика жанра! В PHP 7 их вырезали, а в PHP 8+ о них даже не вспоминают. При первом запуске сайт просто лег. Пришлось экстренно переписывать всё базовое взаимодействие с БД. 2. Процедурный mysqli_. Там, где старого mysql_ не было, использовался mysqli_, но запросы собирались через прямую конкатенацию …
Читать целикомФото
ДАЙДЖЕСТ НОВОСТЕЙ: Привет, коллеги! 👋 Пока вы дописывали таски в пятницу, в мире веб-разработки успели прилететь несколько важных апдейтов. Мы в студии прошерстили всё за вас и собрали 5 самых полезных новостей, которые реально повлияют на ваш код уже в этом месяце. 1. Chrome DevTools прокачался В октябрьском обновлении Chrome появилась полная поддержка soft navigation в Performance и трекинг ad-скриптов в Application. Для нас это значит — теперь SPA-приложения будут нормально замеряться в Lighthouse и DevTools без "кривых" метрик. Мастхэв для аудита! 2. Next.js 16.3 — Instant Navigations Vercel выкатил Instant Navigations — набор инструментов, которые делают SPA-навигацию мгновенной. Плюс ускорили dev-сервер и билды. Если вы на Next.js — обязательно обновляйтесь, особенно если у вас …
Читать целикомФАКТЫ: | Топ-5 бесплатных CMS в России — 2026 Коллеги, давайте без иллюзий: «идеальной CMS» не существует. Но есть те, на которых реально сидит рунет прямо сейчас. Собрал для вас пятёрку бесплатных систем, которые в 2026-м чаще всего встречаются в продакшене. Поехали 👇 5. OpenCart Старичок для интернет-магазинов. Да, дизайн «из 2015-го», да, расширения часто кривые. Но для малого магазина на 200–500 SKU — рабочий конь. Бесплатно, без подписок, хостинг от 300 ₽/мес. В России держится за счёт инерции и огромной базы готовых шаблонов. 4. MODX Revolution Любимец фрилансеров и небольших студий. Гибкость на уровне «лепи что хочешь», чистый код, нет навязанной структуры. Минус — порог входа выше среднего. Но если освоил, кастомные проекты делаешь в разы быстрее. 3. Drupal Тяжёлая артиллер…
Читать целикомСЕКРЕТЫ ПРОФЕССИИ: Как быть полезным ментором без выгорания Коллеги, давайте честно: менторство — это кайф. Видеть, как джун, который вчера гуглил «что такое flexbox», сегодня верстает лендинг без подсказок — бесценно... Но потом ты закрываешь ноут в 23:40, потому что четвёртый час объясняешь, почему npm install не лечит все болезни. И думаешь: «А может, я уже не ментор, а служба поддержки 24/7?» Знакомо? Тогда ловите правила, которые я вывел для себя в Студии за годы работы с джунами и стажёрами. 1. Не будь «гуглом в человеческом обличье» Если вопрос решается за 30 секунд поиска — не отвечай сразу. Скинь ссылку на документацию и скажи: «Прочитай, вернёмся к обсуждению через 20 минут». Ты учишь искать ответы, а не становишься справочником. 2. Выдели слоты, а не будь на связи всегда…
Читать целикомБАЗА: Коллеги, loading="lazy" — одна строка, а профита как от второго монитора. Как работает: Браузер видит <img loading="lazy"> или <iframe loading="lazy"> и не качает файл сразу. Он ждёт, пока элемент приблизится к вьюпорту. Скролл — картинка подгружается. Экономим сеть, память и время загрузки. Когда нужен: — длинные лендинги, блоги, каталоги; — картинки ниже первого экрана; — тяжёлые фото, галереи, превью; — неважные сразу iframe: карты, виджеты, видео. Когда не нужен: — Главный баннер и всё, что влияет на LCP. Если изображение видно сразу, ставим loading="eager" или ничего. — Мелкие иконки на пару КБ — лишний отложенный запрос может дать мерцание. — Контент для печати, скриншотов, экспорта и автотестов. — CSS-фоны: у background-image атрибут не работает. Нужны IntersectionOb…
Читать целикомСЕО: Sitemap.xml: ваш GPS для поисковых роботов Коллеги, давайте честно: 9 из 10 сайтов, которые ко мне приходят на аудит, либо вообще без sitemap, либо с картой, которая не обновлялась со времён «того самого релиза». А потом удивляются, почему свежие страницы в индексе не появляются неделями. Зачем вообще нужен sitemap? Это не «для галочки». Это прямой сигнал Яндексу и Google: «Вот мой контент, вот приоритеты, вот частота обновлений». Особенно критично, если у вас: — более 500 страниц, — глубокая вложенность (>3 кликов от главной), — страницы без внутренних ссылок (лендинги, акции), — молодой сайт с плохой ссылочной массой. Автогенерация: забудьте про ручную правку В продакшене я использую три подхода: → Next.js / Nuxt: плагины next-sitemap и @nuxtjs/sitemap. Конфиг на 10 строк,…
Читать целиком
