Фронтенд-Курилка | Frontend | JS | VUE | NUXT | IT

✍️ Самопрезентация нужна всем айтишникам, кто хочет пройти собес 🤔

📀 За эти 2 минуты вы узнаете, что такое самопрезентация и для чего она нужна в данном коротком видео

Напишите в комментариях, есть ли у вас самопрезентация и используете ли вы ее на собесах 😎

🎬 Полезное короткое видео

🔥За пару часов более 100 сохранений видео. Я уверен, что такой формат точно зайдет моему зрителю

Хочу и здесь поделиться с вами

💾 Сохраняйте и находите для себя полезные видосы

😱 Полезные материалы

Список самых популярных вопросов фронтенд-разработчику в 2025 году

Полезные рилсы, которые ты мог пропустить:

тренажер для собесов

еще один тренажер

сервис по подготовке к собесам

что такое софт скиллы

лайфхак для подготовки к лайвкодингу

еще один тренажер

тренажер для собесов

Как попасть на собес

Как я готовлюсь к собесам

Боль всех новичков в it

Крайне простой способ подготовки к собесам

📌 Больше полезных материалов есть так же в закрепе

👩‍💻 Vue Vapor

Последний год, активно идет тряска по поводу Vapor Mode для Vue. Краткий ликбез, что происходит:

Основная суть работы с DOM во Vue это VDOM. Если очень коротко, то мы берем текущее состояние DOM дерева и новое состояние DOM. Далее, под капотом у нас происходит процесс Diff, где мы сравниваем что поменялось в dom и выкидываем это на фронт.

Зачем это надо? Оптимизация. Прикиньте если мы будем каждый раз перересовывать весь DOM. Будет очень плохо и тяжело. А так, мы работаем только с конкретными нодами.

Однако, у такого подхода все равно есть минус. Минус заключается в том, что мы держим 2 состояния, что как бы все равно кушает ресурсы оперативной памяти. Для десктопа еще можно закрыть глаза, все таки мы уже не сильно думаем за это. Проблемы вскрываются на мобильных устройствах, где все еще стоят ограничения на работу с памятью. С такой проблемой, я лично сталкивался, когда если DOM будет огромным, то мы получим ошибку с тем, что недостаточно памяти.

Vue Vapor позволяет в обход промежуточного состояния сразу прописывать инструкции и монтировать js код в приложении. На словах звучит хорошо. На практике еще не работал.

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

Если вам есть, что рассказать про технологию, то добро пожаловать в комментарии ⌨️

Фронтенд-Курилка | Frontend | JS | VUE | NUXT | IT pinned «🤟 Мой новый игровой сервис Я люблю видеоигры. Редко говорю о своем желании говорить о видеоиграх, а уж темболее играть. На самом деле, видеоигры по-моему мнению это огромная тема для разговора. Можно говорить о разработке, о сюжете, о фичах, о забавных моментах…»

🤟 Мой новый игровой сервис

Я люблю видеоигры. Редко говорю о своем желании говорить о видеоиграх, а уж темболее играть. На самом деле, видеоигры по-моему мнению это огромная тема для разговора. Можно говорить о разработке, о сюжете, о фичах, о забавных моментах, о прохождении.

Мне всегда хотелось, что-то сделать в сфере видеоигр. Разрабатывать игры, я не хотел, по причине того, что мне нравится в них играть и обсуждать. Всегда переживал за то, что мне просто надоест в них играть, если я буду проводить там времени больше чем нужно.

Я фронтенд разработчик. У меня большой опыт в создании сайтов с нуля. Однако, то что я хотел сделать, я не мог сделать 10 лет. Причин было много:

- не хватало денег
- не хватало знаний
- не хватало времени
- не хватало чего-то вечно

Однако, я всегда знал, что хочу добавить в этот проект.

- дневник видеоигр. Трекер по статусам. Найти любую игру и добавить ее к себе
- Парсинг цен. Мне всегда хотелось найти самую дешевую игру
- Во что поиграть. Я хотел решить эту проблему, потому что всегда мы задаемся этим вопросом
- Во что играют друзья. Мне хотелось знать без спроса друзей, а во что они играют или во что они играли.
- Простой в использовании на каждый день. Мне просто хочется простой, быстрый и отзывчивый продукт на каждый день. И с телефона и с десктопа.

И мне получилось это все сделать. 3 ноября, я запустил в релиз сервис rategame.ru. Я поставил большую цель: за 3 месяца собрать 500 активных пользователей. Сейчас нас 20.

Если цель не выполним, сервис надо сносить. Цель нужно выполнить, потому что сервис уже приносит расходы. С увеличением пользователей расходы будут только увеличиваться.

Проект пока что держится на донатах. В будущем будет добавлена премиум подписка, которая будет выкручивать текущие фичи на максимум.

Не буду долго размусоливать, но это мечта, которую я осуществил. Даже, если мы не сможем дойти до результата, я все равно счастлив сделать мой сайт мечты.

rategame.ru

Как работает область видимости в JavaScript. Разбираем популярные вопросы

Область видимости это набор переменных и функций, доступных в конкретной точке кода. В JS она лексическая: определяется расположением кода при объявлении, а не при выполнении.

Основные виды области видимости:

Глобальная: всё, что объявлено на верхнем уровне (в браузере — не в модуле) доступно везде.

Функциональная: всё, что объявлено внутри function, видно только там.

Блочная: всё, что объявлено через let/const внутри { ... }, видно только в этих фигурных скобках (if, for, while, try и т.д.)

Область модуля: верхний уровень ES-модуля — это собственная изолированная область, не глобальная.

let/const vs var:

- var имеет только функциональную область видимости и игнорирует блочную. Пример: if (true) { var x = 1 } — x виден вне блока; с let/const так не будет.
- let/const — блочная область видимости; не протекают за пределы { ... }.

Hoisting есть у всех объявлений, но:

- var поднимается и инициализируется как undefined (обращение до строки объявления даст undefined).
- let/const поднимаются, но попадают в “Temporal Dead Zone” до фактической инициализации — обращение до объявления вызовет ошибку.
- const — неизменяемая ссылка (сам объект/массив внутри может меняться).

Замыкания:

- Функция “помнит” лексическую область, в которой была объявлена, даже если выполняется позже/в другом месте.

- Типичный паттерн: счётчик на замыкании.
Пример: const makeCounter = () => { let n = 0; return () => ++n }
makeCounter() возвращает функцию, которая увеличивает и читает n, недоступную снаружи.
Теневание (shadowing):

- Внутреннее объявление скрывает внешнее с тем же именем.
Пример: let x = 1; { let x = 2; } — снаружи x всё ещё 1.

- Внимание с колбэками в цикле: for (var i = 0; i < 3; i++) setTimeout(()=>console.log(i))
выведет 3,3,3; с let i — 0,1,2, т.к. у let своя блочная область на каждую итерацию.
Поднятие (hoisting) функций:

Function Declaration поднимается целиком: можно вызывать до строки объявления.

Function Expression/Arrow, присвоенные в let/const, ведут себя как переменные: до инициализации — TDZ-ошибка.

Модульная область:

- В ES-модулях (type="module" или .mjs) верхний уровень не попадает в глобальную область. Это помогает избегать конфликтов имён и “засорения” глобального объекта.
this — не про область видимости:
- this определяется способом вызова функции, а не местом объявления. Не путайте: лексическая область — про переменные; this — про контекст вызова. У стрелочных функций this лексически наследуется.

Хочу посоветовать вам канал Саши @front_everyday. У него самый популярный плейлист по Pinia на YouTube и он выпустил курс по Vue3: Разработка полноценного приложение "Менеджер ссылок" на стеке Vue3, Pinia и Supabase!

Это не пересказ документации, а построение полноценного Vue-приложения вплоть до деплоя!

Вас ждут:
🚀 Почти 5.5 часов практики
🚀 Работа с PrimeVue новой версии и Tailwind 4
🚀 Supabase
🚀 Авторизация, регистрация, восстановление пароля
🚀 Защита роутов
🚀 CRUD операции (создание данных, их получение, редактирование и удаление)
🚀 Работа с формами и валидацией
🚀 Фильтрация данных
🚀 Пагинация

В конце вы получите полноценное приложение, которое можно добавить к себе в портфолио или использовать его и дорабатывать на свой вкус!

Полная информация по ссылке!

До конца завтрашнего дня вы можете приобрести курс на 15% дешевле по промокоду DANIIL_BOBROV!

Не упусти возможность прокачаться и сразу получить рабочий проект!

Фронтенд-Курилка | Frontend | JS | VUE | NUXT | IT pinned a photo

"Как работают CSS-селекторы"... Супер важный вопрос для мидла, конечно))
"Как открыть ссылку в новом окне" туда же))

Максимально верное замечание!

Я хочу сказать, что у GPT есть какая-та неточность в этом вопросе. Я сам был удивлен, что мне он показал такие вопросы как самые популярные. По факту, про селекторы меня спрашивали только 3 раза за все время, а про открыть ссылку в новом окне так вообще 1 раз.

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

Опять же, чем выше вы по грейду, тем больше у вас будут спрашивать про работу браузера, сети, js. Еще неизбежно столкнитесь с лайвкодингом, где нужны знания алгоритмов, выше перечисленного и навыки решения задач, через easyoffer или leetcode.

Относитесь к этому списку, не как к последней инстанции - это все таки мой список + погрешность gpt.

Это просто хороший материал, для подготовки к теоретической части собеседований.

Channel name was changed to «Фронтенд-Курилка | Frontend | JS | VUE | NUXT | IT»

🔥 Самые популярные вопросы на собеседовании у фронтенд разработчика в 2025 году

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

1. Все вопросы по популярности: hr/технические/html/css/js/vue и т.д
2. Самые популярные технические вопросы
3. Самые популярные vue.js/nuxt.js вопросы
4. Самые популярные вопросы по js

Если интересно, то можем разобрать некоторые вопросы из этого списка. Дайте реакций, чтобы я это понял

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

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

И несколько таких примеров я знаю.
Назначается созвон на условно 12:00, в 12:10 кандидат спрашивает "а где?", в 12:20, 13:00...

🤡 Через двое суток рекрутер без извинений без нихера говорит "давайте завтра в 12"...

Я думал исключение, но судя по всему нет. Видимо, это симптомы работодательского рынка. Но так будет не всегда.
Будьте ж людьми, в общем. Не факапьте совсем уж дико :(

Это новый мета уровень: посты по моим рилсам.

Леха крутой. Переходите к нему, там выжимка из 9 лет опыта, будучи аналитиком.

Такой контент мы любим 👍

Привет, как я уже говорил мне тут хейтеры, немного "поднасрали", поэтому хочется перепостить посты без какашек))

Ну и будет полезно повторить материал)

Под одним из постов меня попросили рассказать о принципах SOLID.

Исходя из моего опыта, построение архитектуры фреймворка — тема довольно шаблонная, и особо упарываться над какими-то моментами не стоит. Средняя подготовка автоматизатора обычно ниже, чем у разработчика, поэтому главное, чтобы тесты писались — и желательно писались быстро. Тем не менее, применение некоторых принципов SOLID может помочь избежать проблем с поддержкой кода.

🔍 Почему SOLID важен в автоматизации?

Ключевые моменты:
- SOLID делает код более гибким, переиспользуемым и удобным для поддержки.
- Автотесты часто страдают от «спагетти-кода» — SOLID снижает этот риск.
- Принципы применимы к хелперам, API-клиентам, обработчикам данных и другим компонентам.

📌 5 принципов SOLID
1️⃣ S – Single Responsibility (Принцип единственной ответственности)
2️⃣ O – Open/Closed (Принцип открытости/закрытости)
3️⃣ L – Liskov Substitution (Принцип подстановки Лисков)
4️⃣ I – Interface Segregation (Принцип разделения интерфейсов)
5️⃣ D – Dependency Inversion (Принцип инверсии зависимостей)

SOLID — это не строгие правила, а гибкие принципы, которые помогают избегать хаоса в коде.

В следующих постах разберём каждый принцип на примерах из автоматизации.
——————————-

📱 TG-сообщество

📱 Обучение

📱 Отзывы

Представьте, просыпаетесь вы утром, а там
Nuxt 4 официально вышел и включает множество (непустое) улучшений:
🐤Изменили структуру папок проекта (также известную как архитектура): app/, server/, modules/
✨ Обновили useAsyncData и useFetch: теперь с shallow-реактивностью, undefined для дефолта и переиспользованием данных между компонентами.
🍙 Упростили tsconfig, теперь достаточно одного в корне проекта.
🩹 Нормализовали автогенерацию имён компонентов – теперь они будут одинаково отображаться и использоваться и в девтулзах, и в KeepAlive, и с автоимпортами.

Готовы обновляться? Ловите гайд по миграции. Не готовы? Пока что жить можно.
Поддержка Nuxt 3 заявлена до конца 2025, Nuxt 4 – до середины 2026. Ожидается вскоре Nitro v3 и уже на его базе выйдет Nuxt 5.

Доброе утро ☀️

Апгрейд ReChecker продолжается

Продолжаю поэтапно улучшать ReChecker.ru — свой сервис микросервисов для техпроверки сайтов. За последние два дня сделал редизайн главной страницы и ключевых блоков.

Что обновил:

— Hero-раздел с градиентами, легкими анимациями и чётким месседжем
— Полностью переработаны блоки преимуществ, отзывы, FAQ и команда
— Нормальный cookie-блок + добавил юридические страницы (пока с черновыми текстами)
— Все новые компоненты на React + TypeScript: адаптивность, lazy loading, SEO-разметка

Также прокачал одну из самых популярных страниц — Redirect Checker
🔗 https://rechecker.ru/services/redirects
Теперь с нормальной структурой, понятными заголовками и фокусом на пользу.

🎯 Цель — не просто навести красоту. Хочу, чтобы сайт:
— был удобен для пользователей,
— хорошо индексировался,
— и начал привлекать органический трафик на страницы с инструментами.

Впереди — редизайн остальных сервисов, выравнивание UI, правки мобилки и ещё куча всего.
Работаем дальше ✊🏻