Кому нужно — могу скинуть полностью рабочий файл send.php. Пишите в комменты или в личку 👇

🔥 ФИЧА TYPESCRIPT, КОТОРАЯ СПАСАЕТ ОТ 80% БАГОВ

Знакомая боль? Приходит с сервера объект, а у него нет поля, которое ты ожидал. Или тип прилетел не тот. И ловишь потом в консоли undefined is not a function.

Я раньше тупо писал any и молился. Пока не начал юзать Union Types + Type Narrowing. Это реально меняет всё.

—

Проблема:

// Было — типичный JS-кошмар
function formatValue(value) {
  return value.toUpperCase(); // А если прилетит число? Всё упало 🔥
}

Решение (TypeScript):

function formatValue(value: string | number): string {
  // Type Narrowing — TS сам понимает, какой тип сейчас
  if (typeof value === 'string') {
    return value.toUpperCase(); // ✅ TS знает: тут строка
  } else {
    return value.toFixed(2);    // ✅ TS знает: тут число
  }
}

formatValue('hello'); // "HELLO"
formatValue(123.456); // "123.46"
formatValue(true);    // ❌ Ошибка ещё до запуска!

—

⚡ Что даёт:

• Никаких неожиданных undefined в рантайме
• IDE подсказывает методы конкретно под тип
• Ошибки отлавливаешь на этапе написания кода
• Можно комбинировать любые типы: string | number | null | UserType

—

🎯 Где реально спасает:

• Ответы от API (данные могут быть разными)
• Обработка форм (поле то строка, то число)
• Работа с localStorage (там вообще anything)
• Функции-обработчики событий

—

До: писал код → запускал → падало → искал баг 2 часа
После: написал → TS подсветил ошибку → поправил за 2 минуты

Сейчас в своих проектах вообще не представляю работу без Union Types. Особенно когда API присылает { status: 200, data: ... } или { status: 404, error: ... } — делаешь один тип на оба варианта и спишь спокойно.

—

А вы юзаете Union Types или всё ещё по старинке на any? 👇

#TypeScript #JS #Код #Советы #WebDev@freelancehab_dev

🔥 5 ВЕЩЕЙ, КОТОРЫЕ Я ПОНЯЛ ЗА 5 ЛЕТ ФРОНТЕНДА

Когда только начинал, думал: "Научусь верстать — и норм". Сейчас понимаю, что фронтенд — это совсем про другое. Делюсь тем, к чему пришёл с опытом:

—

1. CSS ломается не сам по себе

Раньше: "Почему съехала верстка?!"
Сейчас: "А, кто-то забыл про BEM и написал вложенности 5 уровня"

Научился:
• Не плодить специфичность
• Использовать БЭМ всегда (даже в мелких проектах)
• Никаких !important (почти никогда)

—

2. JS — это не только "оживить страницу"

Раньше: "Слайдер написал — молодец"
Сейчас: "Асинхронность, замыкания, память, оптимизация"

Реальный кейс: сделал infinite scroll, а он жрал 500мб памяти. Потому что забыл удалять слушатели с ушедших со страницы элементов. Мелочь, а прод лёг.

—

3. Стейт-менеджмент — это боль

Redux, MobX, Zustand, Pinia, контекст... Выбрал одно, а через год уже новое модно.

Что реально работает:
• Не тащи либу, если можно контекстом
• Zustand — огонь для средних проектов
• Redux только когда реально много данных и сложная логика

—

4. 50% времени — не код

А:
• Разбирательство, что хочет заказчик
• Синхронизация с бэкендерами
• Code review
• Документация (да, её тоже надо писать)
• Деплой и починка того, что сломалось после деплоя

—

5. Фреймворки приходят и уходят

Был jQuery, Backbone, AngularJS, сейчас React/Vue. Через 5 лет будет что-то другое.

Что реально ценно:
• Понимать, как работает браузер
• Знать нативный JS (не только методы фреймворка)
• Уметь читать чужой код
• Гуглить проблемы

—

Итог: Фронтенд — это не про "научиться за 3 месяца и зарабатывать 300к". Это про постоянное развитие, поиск компромиссов между "красиво" и "быстро", и умение объяснять дизайнеру, почему его "простая анимация" положит сайт на телефонах.

А какой у вас был самый неожиданный инсайт во фронтенде? 👇

#фронтенд #опыт #webdev #разработка #js

🔥 РОАДМАП ВЕРСТАЛЬЩИКА 2026: С ЧЕГО НАЧАТЬ И ЧТО УЧИТЬ

Часто спрашивают: "Хочу в IT, с чего начать? Сколько учиться?". Собрал актуальный план для первой стадии — верстальщик. Не джуниор-фронтенд, а именно тот, кто уже может верстать макеты и получать за это деньги.

🎯 КТО ТАКОЙ ВЕРСТАЛЬЩИК В 2026?

Человек, который превращает дизайн из Figma в код: HTML + CSS, чтобы сайт открывался в браузере и адекватно выглядел на телефонах. Без сложной логики, без сервера, без фреймворков. Но с пониманием семантики, адаптива и БЭМ.

—

⚡ ЧТО НУЖНО ЗНАТЬ (ОБЯЗАТЕЛЬНО):

1. HTML5 — не просто теги
• Семантическая разметка (header, main, section, article — почему это важно)
• Доступность (alt для картинок, aria-атрибуты базово)
• Формы и их элементы

2. CSS3 — тут основная боль
• Флексы и гриды (без них никуда)
• Адаптивность (media queries, mobile-first подход)
• Методология БЭМ (чтобы стили не ломались через месяц)
• Позиционирование, специфичность, наследование

3. Инструменты — без них не возьмут
• Git/GitHub (commit, push, pull — база)
• Figma (нарезать картинки, посмотреть отступы)
• VS Code (и пару плагинов для скорости)

4. JavaScript (база!)
Не фреймворки, а нативный JS:
• Переменные, условия, циклы
• DOM-элементы (найти, изменить, добавить)
• События (клик, сабмит, инпут)
• Fetch для отправки форм

—

🕒 РЕАЛЬНЫЙ ПЛАН НА 3-4 МЕСЯЦА:

Месяц 1 — База
• HTML: все теги, семантика, формы
• CSS: основы, селекторы, блочная модель
• Первый проект: визитка с 1-2 страницами

Месяц 2 — Адаптив и БЭМ
• Flexbox и Grid (тренажеры типа Flexbox Froggy)
• Media queries, mobile-first
• БЭМ на практике (переписать старые проекты)
• Git: научиться коммитить и пушить

Месяц 3 — Инструменты и JS
• Figma: экспорт картинок, работа с макетом
• База JS: точечно для интерактива
• Проект: лендинг с адаптивом и простой формой

Месяц 4 — Портфолио и поиск
• 2-3 проекта в портфолио (можно учебные, но живые)
• GitHub оформить
• Начать откликаться на заказы

—

🎨 ЧТО БУДЕТ ПЛЮСОМ:

• SCSS/Sass (ускоряет написание стилей)
• Tailwind (сейчас много где юзают)
• Оптимизация картинок и производительности
• Понимание, как работает интернет (DNS, серверы)
—

📌 ГЛАВНЫЙ СОВЕТ:

Не учи всё сразу. Возьми один курс по HTML/CSS, пройди до конца, сделай проект. Потом следующий. И главное — верстай каждый день. 2 часа в день лучше, чем 8 часов в субботу.

Кто сейчас учится на верстальщика? С какими сложностями столкнулись? 👇

—

P.S. В следующем посте распишу роадмап на Junior Frontend — React, TypeScript, сборщики и первый коммерческий опыт.

#верстка #верстальщик #роадмап #it #начинающим #обучение

☀️ ПЯТНИЦА!

Последний рывок перед выходными 🚀

Кто сегодня:
• Допиливает задачи?
• Закрывает спринт?
• Уже мысленно в отключке?

План на день: не начинать ничего масштабного в 16:00, иначе зависнет на выходные 😅

Хорошего кода и быстрых деплоев! 👨‍💻

Что по планам на выходные? Работа или отдых? 👇

#пятница #код #выходные

🔥 Сегодня днем расскажу, что учить после вёрстки

В прошлый раз делал пост про роадмап верстальщика — многим зашло. Сегодня будет вторая часть: как стать фронтенд-джуниором.

Что разберу:
• JS — что реально нужно, а что можно пропустить
• React или Vue — на чем стартовать
• TypeScript — обязательно или нет
• Что спрашивают на собесах сейчас

Без воды — только то, что сам использую в работе и что просят в коммерческих проектах.

Если есть темы, которые хочется увидеть — пишите в комменты, добавлю 👇

Днем заходите

🔥 ФРОНТЕНД-ДЖУНИОР 2026: ЧТО УЧИТЬ (ОБЩИЙ ПЛАН)

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

🎯 ЧТО НУЖНО ОСВОИТЬ:

1. JavaScript (глубже, чем просто база)
• ES6+: модули, деструктуризация, spread/rest
• Промисы и async/await
• Методы массивов (map, filter, reduce)
• Замыкания, контекст (this)

2. Git — уверенно
• Ветки, merge, rebase
• Работа в команде, pull requests

3. Один фреймворк (React/Vue)
• Компоненты, пропсы, состояние
• Хуки (useState, useEffect)
• Роутинг

4. TypeScript (база)
• Типизация пропсов и стейта
• Interface / type

5. Работа с API
• Fetch, axios
• Обработка ошибок
• Загрузка/состояния

6. Сборка и инструменты
• Vite / Webpack (понимать основы)
• ESLint, Prettier

—

📌 Дальше по каждой теме сделаю отдельные посты — что конкретно учить, какие темы, где часто ошибаются.
Подписывайтесь, чтобы не пропустить 👇

Какой пункт интереснее всего? С чего начать разбор? 👇

#фронтенд #джуниор #роадмап #обучение #js #react

🌌 СУББОТА: ОТДЫХАЮ ОТ ФРОНТЕНДА

Сегодня выходной от React и TypeScript. Решил залипнуть в другое — начал изучать Unity.

Задумка: сделать ремейк Gravity Defied (кто помнит эту старую игру?). Чисто для души, поэкспериментировать с физикой и 2D-графикой.

Иногда полезно переключаться на что-то совсем другое. Мозг отдыхает, новые идеи приходят, а потом за код садишься с кайфом.

Кто тоже баловался с Unity? С чего начинали? 👇

#выходные #unity #gamedev #отдых@freelancehab_dev

🎮 ВЕЧЕРНИЙ РЕЛАКС

Закрыл ноут, отложил код в сторону. Сегодня вечером буду просто тупить в Ghost of Tsushima на ПК.

Иногда нужно выключать голову и тупо рубиться в самурая. Красивое, атмосферное, мозг не напрягает — то что надо после недели кода.

Кто проходил? Без спойлеров, просто стоит ли вникать в сюжет или лучше просто наслаждаться картинкой? 👇

#вечер #игры #отдых #ghostoftsushima

🔥 ЧТО ДОЛЖЕН ЗНАТЬ ДЖУН: HTML — НЕ ПРОСТО ТЕГИ

Начинаем серию постов по каждой теме из роадмапа. Первый и самый базовый — HTML. Казалось бы, что там сложного? Но 90% новичков делают однотипные ошибки.

🎯 ЧТО РЕАЛЬНО НУЖНО ПО HTML:

1. Семантика — это база
Мало знать <div> и <span>. В 2026 код без семантики считается непрофессиональным.
• <header>, <main>, <footer> — каркас страницы
• <section> vs <article> — понимать разницу
• <nav>, <aside>, <figure>

Зачем это нужно:
• SEO (поисковики любят семантику)
• Доступность (скринридеры)
• Читаемость кода

2. Формы — боль и кровь
• Правильная типизация полей (email, tel)
• Атрибуты: required, placeholder, autocomplete
• Связка <label> с input

3. SEO-теги, о которых забывают
• <noscript> — заголовок страницы
• <meta name="denoscription">
• Open Graph теги для соцсетей

4. Доступность (a11y)
• alt для картинок (обязательно!)
• Правильная иерархия заголовков (h1→h2→h3)

5. Продвинутые теги, которые экономят время
• <details> / <summary> — раскрывашки без JS
• <datalist> — автодополнение
• <picture> — адаптивные изображения

—

📌 ГДЕ УЧИТЬ:
• MDN Web Docs — библия
• web.dev от Google
• Практика: верстать макеты из Figma

—

👉 В следующем посте разберу основные теги HTML и для чего они нужны — с примерами и пояснениями. Не пропустите!

Какой уровень у вас с HTML? Есть пробелы или всё ок? 👇

#фронтенд #html #джуниор #обучение #верстка

🔥 ОСНОВНЫЕ HTML-ТЕГИ: ШПАРГАЛКА ДЛЯ НОВИЧКА

Разбираем самые нужные теги — что делают и где использовать. Сохраняй, пригодится.

—

🎯 КАРКАС СТРАНИЦЫ

<header> — шапка сайта или раздела. Туда ставят лого, меню, заголовок.

<main> — главный контент страницы. Должен быть один на страницу.

<footer> — подвал. Копирайт, контакты, ссылки внизу.

<nav> — навигация. Всё, что относится к меню и ссылкам по сайту.

<section> — смысловой раздел. Например: "Наши услуги", "Отзывы".

<article> — самостоятельная статья или запись. Пост в блоге, новость.

<aside> — боковая панель. Сайдбар, реклама, доп. информация.

—

📝 ТЕКСТ И ЗАГОЛОВКИ

<h1> до <h6> — заголовки по важности. h1 — один на страницу, самый главный.

<p> — абзац текста. Всё, где много текста подряд.

<span> — строчный элемент. Для стилизации части текста, не создаёт новый блок.

<strong> — важный текст. Обычно жирный, для акцентов.

<em> — акцент. Обычно курсив, для интонации.

<br> — перенос строки. Стихи, адреса, там где нужен разрыв.

—

🔗 ССЫЛКИ И ИЗОБРАЖЕНИЯ

<a> — ссылка. Куда ведёт, открывается ли в новом окне.

<img> — картинка. Обязательно добавлять alt — описание для тех, у кого не загрузилась.

<figure> — группа для медиа. Картинка + подпись внутри.

<figcaption> — подпись к картинке. Ставится внутри figure.

—

📋 СПИСКИ

<ul> — маркированный список. Просто перечень с точками.

<ol> — нумерованный список. Где важен порядок (топы, инструкции).

<li> — элемент списка. Ставится внутри ul или ol.

—

📊 ТАБЛИЦЫ (только для табличных данных!)

<table> — контейнер таблицы.

<tr> — строка таблицы.

<td> — ячейка с данными.

<th> — ячейка-заголовок (жирная, по центру).

—

📝 ФОРМЫ — ОСОБОЕ ВНИМАНИЕ

<form> — контейнер формы. Сюда заворачиваешь все поля.

<input> — поле ввода. Типы: text, email, tel, password, number.

<label> — подпись к полю. Обязательно связывать с input (через for или оборачивая).

<textarea> — многострочный текст. Для комментариев, сообщений.

<button> — кнопка. Для отправки формы или действия.

<select> — выпадающий список. Варианты внутри через option.

<option> — элемент выпадающего списка.

<checkbox> и <radio> — чекбоксы и радиокнопки (тоже input с type).

—

⚡ ПРОДВИНУТЫЕ (НО ОЧЕНЬ ПОЛЕЗНЫЕ)

<details> — раскрывашка без JavaScript. Внутри summary + текст.

<summary> — заголовок для details. То, что видно всегда.

<datalist> — автодополнение. Подсказки при вводе в input.

<progress> — индикатор прогресса. Загрузка, заполнение анкеты.

<picture> — адаптивные картинки. Можно подкладывать разные изображения под экраны.

—

📌 ГЛАВНОЕ:

• Не пихай везде <div> — используй семантические теги
• В формах всегда связывай <label> и <input>
• У картинок всегда должен быть alt
• <h1> — только один на странице

Сохраняй пост, чтобы не потерять. В следующей части разберу CSS-свойства, которые реально нужны в работе.

Какой тег используете чаще всего? 👇

#html #верстка #шпаргалка #обучение #фронтенд

🔥 РЕДКИЕ HTML-ТЕГИ, КОТОРЫЕ ЭКОНОМЯТ ВРЕМЯ

Про базовые теги все знают. А эти часто забывают, хотя они реально упрощают жизнь.

—

🧩 ДЛЯ ТЕКСТА И ЦИТАТ:

<mark> — выделяет текст жёлтым маркером. Удобно для поисковых запросов или акцентов.

<small> — делает текст мелким. Для комментариев, дисклеймеров, копирайта.

<sub> и <sup> — подстрочный и надстрочный текст. Химия (H₂O), математика, сноски.

<del> и <ins> — зачёркнутый и вставленный текст. Для правок, изменений в документах.

<kbd> — обозначение клавиш клавиатуры. Например: <kbd>Ctrl</kbd> + <kbd>C</kbd>.

<samp> — вывод программы или примера данных.

<var> — переменная в математике или программировании.

—

⚙️ ДЛЯ КОДА И РАЗМЕТКИ:

<code> — отображение кода. Браузер показывает моноширинным шрифтом.

<pre> — сохраняет форматирование (пробелы, переносы). Для стихов, примеров кода.

<wbr> — указывает место возможного переноса в длинном слове. Полезно для URL или длинных терминов.

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

—

📱 ДЛЯ МЕДИА:

<track> — субтитры для видео. Можно подключать несколько языков.

<source> — несколько форматов для audio/video. Браузер выберет поддерживаемый.

<map> и <area> — карта изображения с кликабельными зонами.

—

🛠 ТЕХНИЧЕСКИЕ:

<template> — шаблон, который не отображается, но может быть клонирован через JS. Для динамических интерфейсов.

<slot> — используется с Web Components для вставки контента в тени.

<output> — отображение результата вычислений (например, в формах).

—

📌 КОРОТКО:

• <mark> — выделение
• <kbd> — клавиши
• <wbr> — переносы
• <track> — субтитры
• <template> — шаблоны

Сохраняй, чтобы не забыть. В следующий раз разберём CSS-свойства, которые реально нужны в работе.

Какой тег юзаете редко, но он реально выручает? 👇

#html #верстка #шпаргалка #обучение #фронтенд

🌇 ВЫХОДНЫЕ, А РАБОТА САМА НАШЛА

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

Прислал ссылку для примера: https://kolomna.centurippe.ru. Говорит, хочу что-то похожее, но чтобы было современнее, с крутыми фишками, адаптивом под доставку, чтобы на телефоне листалось как в инстаграме.

Самое приятное — даже не спрашивал про цену. Просто сказал: "Я знаю, как ты делаешь, делай на своё усмотрение, по деньгам не обижу".

Когда тебя ценят за качество, а не выбирают подешевле — это дорогого стоит.

Планирую:
• Сделать акцент на визуал (пицца должна быть сочной на фото)
• Удобный конструктор заказа
• Интеграция с доставкой
• Анимации при скролле

В общем, работа будет интересная. А главное — с человеком, который доверяет.

Вот такие приятные сюрпризы случаются даже в выходные 🍕

У вас бывало, что заказчики возвращались спустя годы? 👇

#фриланс #заказчики #работа #вебразработка

🔥 КАК УЧИТЬ HTML: НЕ ПОВТОРЯЙ МОИ ОШИБКИ

Когда я только начинал, думал: "Сяду, выучу все теги, потом начну верстать". Спойлер: так не работает. Через неделю в голове каша, а верстать всё равно не умеешь.

Вот мой путь, который реально помог:

—

🚫 ЧТО НЕ РАБОТАЕТ:

• Зубрить теги списком — бесполезно
• Смотреть 10 часов теории без практики
• Ждать, пока выучишь всё "до идеала"

—

✅ ЧТО РАБОТАЕТ:

1. Сразу пиши страницы

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

2. Гугли — это норм

Все гуглят. Я до сих пор гуглю, даже спустя годы. Разница только в том, что сейчас я знаю, ЧТО именно гуглить. Новичку главное — научиться формулировать запросы.

3. Делай мини-проекты

Не пытайся сразу свернуть "Авито". Начни с малого:
• Карточка товара
• Форма входа
• Шапка сайта
• Список с картинками

Каждый мини-проект — новый тег или свойство, которые запомнятся навсегда.

4. Повторяй за другими

Нашёл на ютубе, как человек верстает — повторяй параллельно. Останавливай видео, делай сам. Не просто смотри, а именно повторяй .

—

🔧 ПОЛЕЗНЫЕ ССЫЛКИ:

📚 MDN Web Docs — библия веб-разработчика. Если что-то непонятно — иди сюда .

🎮 W3Schools — простые объяснения и можно тестировать код прямо в браузере .

🧪 CodePen — песочница, где можно экспериментировать и сразу видеть результат. Идеально, когда лень поднимать проект локально .

📺 YouTube — ищи "верстка для начинающих". Главное — повторять, а не просто смотреть .

—

🎯 ГЛАВНОЕ:

HTML учится не тогда, когда ты читаешь про теги, а когда ты пытаешься сверстать конкретную страницу и гуглишь "как сделать список" или "как вставить картинку". Так оно запоминается само.

А вы как учили? Тоже зубрили или сразу в бой? 👇

#html #верстка #обучение #новичкам #frontend

Кстати, реально так сейчас на рынке в РФ.

🎨 CSS ДЛЯ НОВИЧКА: КАК РЕАЛЬНО ВЫУЧИТЬ, А НЕ ЗАЗУБРИТЬ

Про HTML уже говорили — та же история с CSS. Если просто читать про свойства, ничего не запомнится. Рассказываю, как подходить к стилям, чтобы они не бесили.

—

🚫 ЧТО НЕ РАБОТАЕТ:

• Учить все свойства подряд (их сотни, а нужно от силы 30-40)
• Копипастить чужие стили, не вникая
• Долбиться в стену, когда что-то не ровно — лучше загуглить

—

✅ КАК РЕАЛЬНО РАЗОБРАТЬСЯ:

1. Пойми базу, а не всё сразу

Достаточно для старта:
• Flexbox (как расставить элементы)
• Grid (для сложных сеток)
• margin/padding (отступы)
• цвет, фон, шрифты

Остальное придет с задачами.

2. Гугли каждую проблему

Не помнишь, как выровнять по центру? Забей в поиск — и через 5 минут уже сделал. Так и запоминается. Я до сих пор гуглю "css flex gap" каждый раз, когда пишу.

3. Экспериментируй в песочнице

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

4. Верстай что-то реальное

Не абстрактные квадратики, а:
• карточку товара
• шапку сайта
• форму обратной связи

Когда видишь результат, учиться интереснее.

—

🔧 ПОЛЕЗНЫЕ ССЫЛКИ:

📚 MDN Web Docs — та же библия, теперь по CSS

🎮 Flexbox Froggy — игра, где учишь флексы на лягушках

🥕 Grid Garden — тоже игра, только по Grid

🧪 CodePen — песочница для экспериментов

—

🎯 ГЛАВНОЕ:

CSS учится не когда читаешь, а когда верстаешь, гуглишь, ошибаешься, материшься и снова верстаешь. Так оно и остаётся в голове.

А вы с какими проблемами в CSS чаще всего сталкивались? 👇

#css #верстка #обучение #новичкам #frontend