Логово верстальщика

👩‍💻 Face Toggle Интересный дизайн переключателя. Сделаны на SCSS и JavaScript. Открыть код...

Как frontend-разработчику получить оффер в Bigtech? Ты вроде бы уже не джун, но всё равно чувствуешь, что топчешься на месте? Рынок перегрет, требований всё больше, а откликов — всё меньше? На собесах валят на алгоритмах или просят "нарисовать" архитектуру, как будто ты ведущий. При этом вокруг кто-то постоянно получает офферы в Яндекс или VK, а у тебя не получается даже дойти до финального этапа? Хочется стабильности, интересных задач и наконец-то попасть в сильную команду...

Меня зовут Тихон, привет! Я — действующий Frontend-разработчик и ментор. Помогаю устроиться на хорошие позиции в Bigtech и сопровождаю на испытательном сроке.

В своем канале: 👉 публикую видео с решением задач, которые прямо сейчас дают крупные компании на собеседованиях 👉даю примеры по прохождению собеседований 👉разбираю резюме и докручиваю резюме подписчиков 👉и просто создаю дружелюбное, комфортное сообщество, где коллеги всегда готовы подсказать и поддержать 🎁В закрепе тебя ждёт подборка из 60 задач, которые сейчас дают на собеседованиях Яндекс, Т-Банк и другие крупные IT игроки. Подписывайся и получай максимум пользы, а нас уже больше 2000 🤓: https://t.me/+tcOTMF2Pg4piNDky Реклама, ИП Галактионов Тихон Витальевич, инн: 771618975809, erid: 2W5zFK4VWEk

⚙️ Напоминание, что scope и блоки стилей HTML — это мощное сочетание Существует так много различных инструментов для написания CSS с ограниченной областью видимости с очень разными взглядами на то, как это делать. Иногда это лишь подфункция инструмента, выполняющего другие задачи. Но, как правило, это концепция, требующая инструментария для реализации. Читать...

👩‍💻 Проблема с new URL(), и как URL.parse() её решает Часто приходится анализировать множество URL-адресов. Частично для их проверки, а также для нормализации или извлечения определённых частей из URL. API URL в браузерах позволяет это делать, но его эргономика не идеальна. Читать...

👩‍💻 В чем разница между em и rem в CSS? В CSS em и rem — это относительные единицы измерения, используемые для задания размеров шрифтов, отступов, полей и других стилей. em основывается на размере шрифта родителя, тогда как rem ориентирован на размер шрифта корневого элемента (html), что делает его предсказуемым и удобным для масштабирования. ➡️ Пример:

html {
  font-size: 16px; /* Базовый размер шрифта */
}

.container {
  font-size: 2em; /* 32px, основывается на размере родителя */
  margin: 1rem;   /* 16px, независимо от родителя */
}

🗣️ Использование rem помогает сохранить консистентность размеров при вложенных элементах, а em подходит для адаптивного дизайна, когда размеры зависят от родителей.

🖥 Подробнее тут

👩‍💻 Создание CLI-приложения с Laravel и Docker Хотя Laravel традиционно используется для создания веб-приложений, некоторые приложения нуждаются в надёжных командах CLI, запускаемых через Docker в продакшн-среде. Узнайте, как настроить образ Docker для запуска Artisan CLI, благодаря чему вы получите основу для распределения CLI-приложений на PHP. Читать...

👩‍💻 CI/CD для начинающих: деплой React-приложения без боли В статье показан процесс развертывания React-приложения на сервере: от упаковки кода в CI/CD до отправки его в прод. Всё на примере простого to-do приложения. Читать...

👩‍💻 Создание веб-компонента с нуля Сегодня я решил, что мы создадим HTML веб-компонент с нуля. Давайте создадим компонент, показывающий и скрывающий текст при переключении кнопки. Читать...

👩‍💻 Создание адаптивной сетки с переменными CSS Создайте CSS-сетку, которая меняется в зависимости от размера экрана. Используйте CSS-переменные для задания отступов и ширины колонок, чтобы легко настраивать и менять их для разных разрешений экрана. ➡️ Пример: Создайте сетку с тремя колонками для больших экранов, двумя колонками для средних и одной колонкой для мобильных. Решение задачи🔽

:root { --column-gap: 20px; --row-gap: 20px; --column-count: 3; } .container { display: grid; grid-template-columns: repeat(var(--column-count), 1fr); gap: var(--row-gap) var(--column-gap); } @media (max-width: 768px) { :root { --column-count: 2; } } @media (max-width: 480px) { :root { --column-count: 1; } }

👩‍💻 Использование async и defer для управления скриптами В мире веб-разработки оптимизация времени загрузки страниц имеет решающее значение. Два мощных атрибута тега <script> — async и defer — могут существенно повлиять на производительность сайта. Использование этих атрибутов без их глубокого понимания может негативно сказаться на производительности и привести к ошибкам. Давайте начнём с основ и узнаем, что делают эти атрибуты и когда их следует использовать. Читать...

📦 Изолируй хаос Большинство багов рождаются в точках пересечения: сервисы, зависимости, сторонние API. 👉 Совет: строй систему так, чтобы каждый нестабильный элемент был в «песочнице» — ограниченном по влиянию и контролируемом блоке. Проблема не в том, что часть системы может упасть, а в том, если она потянет за собой всё остальное.

👩‍💻 Масштабируемый CSS с архитектурой ITCSS Статья рассказывает об архитектуре Inverted Triangle CSS, которая помогает масштабировать и поддерживать крупные CSS проекты. Обсуждаются причины выбора, пошаговая реализация и сравнение с другими подходами. Читать...

⚙️ Паттерн «Бэкенд для фронтенда»: преимущества, недостатки и лучшие практики для реализации Если ты хочешь стать настоящим мастером API, тебе нужно знать о паттерне BFF. В этой статье рассказываем, как создавать управляемую архитектуру с использованием BFF, избегая избыточной сложности и головной боли при поддержке. Читать...

👩‍💻 React и FormData Узнайте о новейшем и одновременно старейшем стандарте React для доступа к данным формы, а также о том, как использовать его с TypeScript. Читать...

📈 Подборка статей для вашей карьеры • «Сбер» режет косты • Все, пора увольняться: что я поняла после работы в токсичных командах • Чем Cloud-инженер отличается от DevOps-инженера и что между ними общего • Правда или вымысел? Разоблачаем мифы о профессии технического писателя • 5 видов усталости в IT… и не только

🔥 Хочешь быть в авангарде технологий и управлять будущим? Тогда это твой билет в мир ИТ, ИИ и нейросетей! 🤖✨ Представь, что ты всегда на шаг впереди: знаешь о самых свежих трендах, получаешь эксклюзивные знания и открываешь двери к новым карьерным вершинам. Звучит круто? Тогда не упусти шанс! Почему стоит подписаться прямо сейчас? 🚀 Быть на гребне технологической волны и опережать конкурентов 🚀 Получать доступ к уникальным курсам, вебинарам и инсайтам от экспертов 🚀 Прокачивать свои навыки и строить карьеру мечты

🔥 Только для тех, кто хочет больше — присоединяйся к нашей подборке и начни менять своё будущее уже сегодня!

👉 Жми сюда и будь в числе первых: https://t.me/addlist/qmGQb4T5fpZjYWY6 Не упусти свой шанс стать профи, за которым будущее!

➡️ Пара шаблонов кастомизированных элементов Handlebars для Apache Superset Apache Superset — популярный инструмент для визуализации данных с открытым кодом. Но при его использовании можно столкнуться с ограничениями. В статье обсуждается, как с помощью шаблонов Handlebars и Jinja решать эти проблемы, включая интеграцию web-верстки в дашборды и обход ограничений системы. Читать...

👩‍💻 Автоматическое определение направления флекса по размеру контейнера Реализуйте функцию autoFlexDirection(container, threshold = 600), которая динамически меняет направление флекса (row или column) у заданного контейнера в зависимости от его ширины. Если ширина контейнера меньше threshold пикселей — флекс-направление должно быть column, иначе — row.

Изменение должно происходить в реальном времени при ресайзе окна, без перезагрузки страницы и без использования CSS-медиа-запросов

Решение задачи🔽

function autoFlexDirection(container, threshold = 600) { function updateFlex() { const width = container.offsetWidth; container.style.flexDirection = width < threshold ? 'column' : 'row'; } // Вызываем при старте updateFlex(); // Обновляем при каждом ресайзе окна window.addEventListener('resize', updateFlex); // Для случаев, когда контейнер сам меняет размер (не окно) const observer = new ResizeObserver(updateFlex); observer.observe(container); } // Пример использования: const container = document.querySelector('.flex-container'); autoFlexDirection(container, 700);

👩‍💻 Автоматическая караоке-система на основе React и Vercel Подробное пошаговое руководство по созданию бессерверного приложения для того, чтобы повеселиться в хорошей компании. Читать...

👩‍💻 8 неэффективных практик JavaScript, которых лучше избегать Отказавшись от неэффективных практик программирования на JavaScript, вы всегда будете писать удобный и легко читаемый код. Это сэкономит вам и вашей команде много времени и обеспечит долгую жизнь вашим продуктам. Читать...