Привет! 👋 Делюсь своим реальным процессом роста в прикладном программировании. 🚀

🗓
Начало: Учусь с нуля :октябрь 2023 года.

Освоенный стек (на 23.10.2025): HTML, CSS,SASS, JavaScript, TypeScript, React,Next.js,Jest,Cypress.

Текущая задача: Закрепляю знания и тяну практику на платформе Preax.

Новая технология: Осваиваю язык Java.

Читаю: Java для всех. Алексей Васильев. 📚

⏰ Моё Расписание (Как я расту)
Я придерживаюсь строгого графика для максимального прогресса:

9:00 – 12:00: Решаю 1-2 задачи на Codewars делаю ревью работ на Preax.
12:30 – 15:00: Пишу новый код (практика на Preax или тренировка frontend-скилов) Пишу на Next.js
15:00 – 18:00: Осваиваю новые технологии (на данный момент — Java).
21:30 – 23:00: Читаю книги (сейчас — Java для всех. Алексей Васильев).

💡 Что публикую на канале
Стадии роста и личные проекты.
Интересные материалы и лайфхаки.
Проблемы и способы их решения.

#помогаторы - для ревью
#помогаторы@brit_front
#Next #Next@brit_front
#книга
#задачи

#рост #программирование #история #стек #задача #технология #расписание #прогресс #код #практика #скилы #материалы #лайфхаки #проблемы #решения

🌐 Где меня найти 👇

VK: https://vk.com/vovirus
GitHub: https://github.com/BRIT47rus
Codewars: https://www.codewars.com/users/Brit47
Preax (ссылка):

Если ты тоже самоучка или ищешь вдохновения — подписывайся! 🔥 #самоучка #вдохновение #подписка #программирование #развитие
#frontend #js #javascript #junior #джун #css #React #next #програмиронание #preax

Конструкторы (new Promise, new Date, в React) 🤔✨ #Программирование #Разработка #JavaScript #React

Constructor (конструктор) позволяет создать (сконструировать) объект с начальным состоянием (заданными значениями свойств). 🛠 Как онлайн выбор автомобиля: выбираете модель, цвет, комплектацию – в конце получаете свой объект автомобиль уже с заданными значениями. 🚗

Объекты ВСЕГДА создаются с помощью конструктора, даже если вы сами явно не создавали конструктор (в этом случае компилятор автоматически создает конструктор по-умолчанию без параметров). 💡

Основное назначение конструктора: принять входящие параметры, присвоить их значения в поля объекта и вернуть уже заполненный объект. 🎯
Что значит слово “вернуть“? В том месте, где вы написали new, ВЕРНЕТСЯ объект и присвоится в переменную. ↩️
Даже когда используются литералы, такие как {} (объектный литерал) или [] (литерал массива). 📝

НО!утверждение о том, что "компилятор автоматически создает конструктор по-умолчанию", верно в контексте классов (когда вы определяете собственный тип), но в контексте литералов JavaScript работает немного иначе. 🧐
Когда вы используете литерал, вы фактически вызываете встроенный, базовый конструктор JavaScript, но неявно (скрытно). 👻
ВОТ явный

 const objB = new Object();
objB.name = 'Bob';

🚀

При работе с примитивами (строками, числами, булевыми), JavaScript автоматически выполняет "боксирование" (boxing): когда вы пытаетесь вызвать метод примитива (например, "text".toUpperCase()), движок временно оборачивает его в соответствующий объект-конструктор, выполняет метод, а затем уничтожает временный объект. 📦🗑

Однако, в современном React (функциональных компонентах) конструкторы не используются. Они были ключевым элементом в классовых компонентах, которые сейчас используются реже. ⚛️📉

import React, { Component } from 'react';

class Counter extends Component {
    // 1. 

Конструктор 
    constructor(props) {
        // Обязательно: вызывает конструктор родительского класса (React.Component)
        super(props); 
        // 2. Инициализация начального состояния (аналог 'сконструировать' объект)
        this.state = {
            count: 0
        }; 
        // 3. Привязка метода: обеспечивает, что 'this' внутри handleClick будет ссылаться на компонент
        this.handleClick = this.handleClick.bind(this); 
    }
    handleClick() {
        this.setState(prevState => ({
            count: prevState.count + 1
        })); 
    }
    render() {
        return (
            <div>
                <h2>Счетчик: {this.state.count}</h2> 
                <button onClick={this.handleClick}>Увеличить</button> 
            </div>
        );
    }
}
export default Counter;

Вот примеры использования ключевого слова new в JavaScript для создания экземпляров (объектов) из встроенных конструкторов 🆕

// 1. Создание объекта с текущей датой и временем


const now = new Date(); 

//2 Пример: Создание промиса, который разрешается через 1 секунду
const myPromise = new Promise((resolve, reject) => { 
    // Внутри исполнителя мы выполняем асинхронную операцию
    setTimeout(() => { 
        const data = "Данные успешно загружены"; 
        // При успехе вызываем resolve()
        resolve(data); 
    }, 1000);
});

// 3. Создание объекта String (НЕ РЕКОМЕНДУЕТСЯ)
const objectString = new String("Привет, мир"); 
console.log(typeof objectString); // "object" (объект)

💻

и т.д
#ООП@brit_front 📚
#ООП 📖
#JavaScript 🌐

🦆 "Утиная типизация" (Duck Typing)
Вместо явных интерфейсов JS использует принцип: "Если это выглядит как утка, плавает как утка и крякает как утка, то это, вероятно, утка."

Что это значит: Если вы пишете функцию, которая ожидает объект с методом start(), вам не нужно проверять, реализует ли объект какой-то формальный интерфейс. Вам просто нужно вызвать объект.start(). Если метод существует, код работает; если нет, будет ошибка времени выполнения.

function process(device) {
  // JS просто предполагает, что device имеет метод start()
  // Если метод отсутствует, будет выброшена ошибка
  device.start(); 
}

// Пример объекта, который соответствует "интерфейсу" неявно
const car = {
  start: () => console.log("Car started!"),
  drive: () => console.log("Driving...")
};

process(car); // Car started!

🛠 Эмуляция интерфейсов в JavaScript
Хотя встроенного синтаксиса нет, разработчики часто используют другие подходы для обеспечения структуры:
1️⃣Проверка в рантайме (Run-time Checks):

Можно вручную проверять наличие требуемых методов и свойств в конструкторе или методе, вызывая исключение, если они отсутствуют. Это обеспечивает гарантии, но требует больше ручного кода.
2️⃣Абстрактные классы (Abstract Classes):

Можно создать класс, который сам не предназначен для создания экземпляров, но содержит методы, которые намеренно выбрасывают ошибку (throw new Error("Метод должен быть реализован!")). Классы-наследники затем обязаны переопределить эти методы.

✨ TypeScript: Решение с явными интерфейсами

Если вам нужна строгая типизация, явные интерфейсы и проверка кода до запуска (на этапе компиляции), сообщество JavaScript использует TypeScript.

TypeScript — это надмножество JavaScript, которое добавляет синтаксис для типов, включая ключевое слово interface:

// Это код TypeScript, а не чистого JS
interface ILogger {
  log(message: string): void;
  error(message: string): void;
}

class ConsoleLogger implements ILogger {
  log(message: string) {
    console.log(`[INFO] ${message}`);
  }

  // Если мы забудем реализовать метод error(), TypeScript выдаст ошибку
  error(message: string) {
    console.error(`[ERROR] ${message}`);
  }
}

TypeScript позволяет вам работать с интерфейсами, а затем "компилируется" в чистый JavaScript, который исполняется в браузере.

КРЯ ! КРЯ!
#JavaScript #TS #JS

🏗 SOLID: Философия профессионального кода (Пост 1/6)

SOLID — это аббревиатура из пяти принципов объектно-ориентированного программирования (ООП). Это фильтр, через который должна проходить каждая ваша мысль о дизайне кода.
Цель: Писать код, который легко изменять, расширять и поддерживать.
Применимость: Хотя это принципы ООП, они применимы в любом современном языке, включая JavaScript (с классами) и, тем более, TypeScript.

Буква,Принцип,Название
S,Single Responsibility Principle,Единственная Ответственность
O,Open-Closed Principle,Открытости-Закрытости
L,Liskov Substitution Principle,Подстановки Барбары Лисков
I,Interface Segregation Principle,Разделения Интерфейса
D,Dependency Inversion Principle,Инверсии Зависимостей

🎯 Пример S: Принцип Единственной Ответственности (SRP)
Начинаем с самого простого, но часто нарушаемого принципа: SRP (Single Responsibility Principle).
Принцип: У каждого класса (или модуля/функции) должна быть только одна причина для изменения.
❌ Плохой код (Нарушение SRP)

class UserService {
    // 1. Управление данными (Причина для изменения: изменилась база данных/API)
    createUser(user) {
        console.log(`Saving ${user.name} to DB...`);
    }

    // 2. Управление уведомлениями (Причина для изменения: нужно добавить SMS)
    sendEmail(user, message) {
        console.log(`Sending email to ${user.email}: ${message}`);
    }

    // 3. Управление логированием (Причина для изменения: нужно писать в файл)
    logAction(action) {
        console.log(`[LOG]: ${action}`);
    }
}

// Если нам нужно поменять только, как мы отправляем почту, 
// мы вынуждены менять весь класс UserService! 😱

✅ Хороший код (Соблюдение SRP)
Мы разделяем логику на три отдельных класса/модуля. У каждого — только одна ответственность:

// 1. Класс для управления данными
class UserRepository {
    save(user) {
        console.log(`Saving user ${user.name} to DB.`);
    }
}

// 2. Класс для управления уведомлениями
class NotificationService {
    sendEmail(email, message) {
        console.log(`Sending email to ${email}: ${message}`);
    }
}

// 3. Класс для объединения (координации) действий
class UserRegistrationService {
    constructor(repository, notifier) {
        // Зависимости внедряются извне (DIP, увидим позже)
        this.repo = repository;
        this.notifier = notifier;
    }

    register(user) {
        this.repo.save(user); // Вызывает ответственность Repository
        this.notifier.sendEmail(user.email, "Welcome!"); // Вызывает ответственность Notifier
        // Логирование может быть в отдельном декораторе или здесь, но в минимальном виде
    }
}

🏆 Выгода от SRP
Чистота: Код легче читать и понимать, что делает каждая часть.

Поддержка: Если изменился только способ сохранения данных, мы меняем только UserRepository, не трогая логику уведомлений.

Тестирование: Легко написать юнит-тест, который проверяет только, что NotificationService отправляет письмо, не инициализируя при этом базу данных.
——————————-продолжение расшифровки в комментариях————-
#SOLID #JavaScript #ООП #Программирование

Как я перестал «тыкаться» и начал учиться: мои итоги 2025 года 👨‍💻

Два года в разработке. Путь, который начался с попыток кодить на телефоне , привел меня к четкой системе и пониманию: фронтенд — это не только React.

Главный инсайт года: Дисциплина бьет хаос.
В 2024-м я не понимал, за что хвататься. В 2025-м я ввел жесткий график:
☀️ Утро — задачи.
🥗 Обед — теория.
💻 День — практика и пет-проекты.
📖 Перед сном — профильная книга.

Мои ошибки и победы:
Февраль: Прыгнул в Next.js без базы React и TS. Получил по носу, откатился назад и начал учить базу. Это было лучшее решение.
Март: «Оживил» GitHub. Разобрался со сборщиками (Webpack/Vite) — теперь я понимаю, как код превращается в приложение, а не просто жму кнопки.
Апрель-Май: Ушел в «подкапотку» сетей и Node.js. Было сложно, но теперь я знаю, как мои запросы летают по протоколам.
Лето: Прокачка JS, алгоритмы и структуры данных. Теперь мой код стал эффективнее.
Переломный момент — Preax 🚀
Думал, что HTML/CSS — это просто. Платформа Preax быстро поставила меня на место. Жесткое ревью, пиксель-перфект, семантика. Теперь я не просто копирую макет, я делаю продукт, готовый к продакшену. А еще сам проверяю чужие работы — это нереально бустит насмотренность.

Изученные технологии 2025:
-React
-TypeScript
-Flux архитектура и библеотеки на ней
-StoryBook
-Jest
-Cypress
-Node/express
-FireBase
-AWS
-Strapi
-oAuth(подключение)
Книги:
-JavaScript рецепты
-Компьютерные сети (6 издание)
-JavaScript Полное руководство (Носорог)
-Алгоритмы(Род стивенс)
-Патерны проектирования (Уго ди франческо)
-Оптимизирующие компиляторы,структура и алгоритмы (Константин Владимиров)
-Грокаем
1)функциональное мышление
2)continius delivery
3)алгоритмы 2
4)конкурентность
-React к вершинам мастерства

Что дальше? 2026-й станет финальным годом обучения. Сейчас грызу Next.js и Java (для расширения кругозора). План на 2027-й — выход на работу мечты.

Всех с наступающим! Учитесь, ошибайтесь и не забивайте на базу!
#frontend #learning #javascript #it #итогигода #preax

🚀 Popover API: Всплывающие окна без боли и JavaScript

Раньше для создания обычного выпадающего меню или тултипа нам приходилось либо подключать тяжелые библиотеки, либо вручную возиться с z-index, позиционированием и обработчиками кликов.

Popover API меняет правила игры. Теперь это стандартная фича браузеров, позволяющая создавать всплывающие элементы на чистом HTML.

🔹 Top Layer (Верхний слой): Поповер автоматически рендерится на «верхнем слое» страницы. Больше никакой войны с z-index: 99999. 🔹 Light Dismiss: Нативное «легкое закрытие». Кликнули мимо или нажали Esc — окно закрылось само. 🔹 Минимум кода: Связка кнопки и окна происходит через HTML-атрибуты. 🔹 Доступность (A11Y): Браузер сам объясняет скринридерам, что это всплывающее окно и оно открыто.

<button popovertarget="my-menu">Открыть меню</button>

<div id="my-menu" popover>
  <p>Привет! Я — нативный поповер 👋</p>
</div>

🧐 Popover vs <dialog>: в чем разница?

Многие путают их, но назначение разное:

<dialog> — для критически важных модальных окон (подтверждение удаления, логин), которые блокируют работу со страницей.

Popover API — для вспомогательного UI (меню, подсказки, уведомления), которые не мешают взаимодействию с контентом.

🎨 Кастомизация

Вы можете стилизовать поповер через CSS с помощью псевдокласса :popover-open и добавлять размытие фона через ::backdrop.

Поддержка: Уже во всех современных браузерах (Chrome 114+, Safari 17+, Firefox 125+). Можно смело использовать в проектах!
Благодарю Андрея за предоставленный новый иструмент. канал https://t.me/vzhuh_frontend
#webdev #frontend #html #css #tips