Привет, на связи Tproger!

Мы хотим лучше понять нашу аудиторию и её интересы. Помогите нам — пройдите небольшой опрос по ссылке.

Спасибо и отличного дня!

Вопросы с собеседований: что такое специфичность CSS-селекторов и как она работает?

Типы селекторов расположены по возрастанию специфичности:
— Селекторы типов элементов (например, h1) и псевдоэлементов (например, ::before).
— Селекторы классов (например, .example), селекторы атрибутов (например, [type="radio"]) и псевдоклассов (например, :hover)
— Селекторы идентификаторов (например, #example).

Универсальный селектор (*), комбинаторы (+, >, ~, ' ') и отрицающий псевдокласс (:not()) не влияют на специфичность. Но селекторы, объявленные внутри :not(), влияют.

Стили, обьявленные в элементе (например, style="font-weight:bold"), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.

Расчёт специфичности:
— тег и псевдоэлемент имеют специфичность 0001;
— класс, псевдокласс, атрибут — 0010;
— id имеет специфичность 0100;
— инлайновый стиль имеет приоритет 1000.

#простымисловами #собеседование #css

Nuxt JS - Vue + SSR: вводный курс за 70 минут

Nuxt JS — это фреймворк, который ещё больше упрощает создание веб-приложений с помощью Vue.js. В этом небольшом видео вы изучите основы работы с технологией и сможете создавать свои собственные проекты на Vue с сервер-сайд рендерингом.

#видео #nuxtjs #vue

kiro.dev | IDE для вайб-кодинга

Убийца Cursor по версии Amazon, на сей раз с поддержкой MCP (Model Context Protocol — «щупалец» LLM). Покуда проект на стадии Preview, многие фичи достаются задаром. Если вовремя подбирать такие аналоги, наверное, можно и не платить никому по $20 ежемесячно 😜

Цена: пока бесплатно
Сайт проекта
@prog_tools
💊 — Если после этого нужна таблетка

Друзья, пора забыть о JS. И вот аргумент:

WHIP — стандартный протокол общения WebRTC приложений

WebRTC — это протокол удалённой передачи аудио и видео в реальном времени, сконструированный специально, чтобы работать в ненадёжных сетях без специального оборудования или ПО, прямо из браузера. Без него ваши привычные сервисы для созвонов просто не работали бы как надо.

В этой статье вы узнаете не только подробности о WebRTC, но и познакомитесь со стандартами WHEP/WHIP.

#webrtc

Возможно, что эти HTML- и CSS-ошибки есть в вашем коде

Казалось бы, основные грабли веб-верстки давно известны, но ловушки ждут в деталях — от неожиданных эффектов font-size в rem и px до проблем с outline и адаптацией стилей к accessibility.

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

https://habr.com/ru/companies/ruvds/articles/928018/

Я вот не задумывался о некоторых нюансах, описанных в статье. А вы?

#фронтенд #css #html

Эффект пикселизации с помощью CSS и JS

В этом проекте автор показал, как реализовать эффект пикселизации при наведении курсора на область изображения. Всё работает быстро и чётко — отлично подойдет для реальных проектов, где это может потребоваться.

Код можно посмотреть здесь.

#codepen

Типизация в React Router: ещё больше надёжности для вашей навигации

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

Про конкретные подходы к типизации, советы по внедрению и рабочие примеры для реальных проектов на React вы можете узнать тут.

#react #фронтенд #typescript

Создание Typing Test приложения

Typing Test App — это приложение, которое позволяет проверять скорость и точность печати. Для его создания автор выбрал React и TypeScript , а для работы с состоянием использовал Redux Toolkit.

С подробным туториалом, а так же с репозиторием проекта вы сможете ознакомиться по ссылке:

https://tproger.ru/articles/sozdanie-typing-test-prilozheniya-na-react-typescript-redux-toolkit/

#react #typescript

Вселенная пушит тебе знаки…

Стоит ли сегодня деплоить на прод, начинать новый проект или лучше затаиться и почистить кэш? Вытащи карту из нашей цифровой колоды и получи мудрый совет судьбы перед новым релизом, багфиксом или планёркой: https://tprg.ru/romB

Реклама

​​5 архитектурных ошибок, которые мы совершаем при старте проектов

Многие из нас с головой уходят в реализацию идеи, не задавая себе главный вопрос: а что будет, когда проект вырастет? 

Аспекты вроде масштабирования, как и фундамент дома, нужно продумывать сначала, иначе потом вас ждет не апгрейд, а перестройка с нуля. А еще именно в самом начале проекта закладывается почва для ада зависимостей: спонтанные решения, быстрые фиксы, «временные» костыли — всё это превращается в хаос, который сложно контролировать.

В статье Tproger 5 самых частых архитектурных ошибок, которые мешают проектам расти и развиваться.

#основы
@zen_of_python
🙊 — Если сам так писал

ECMAScript 2025: что нового появилось в JavaScript

Очередная версия языка уже одобрена и теперь настала пора познакомиться с новинками этого года. В статье — обзор ключевых фич ECMAScript 2025, которые действительно пригодятся в работе: импорт атрибутов, Promise.try(), экранирование регулярок, помощники итераторов и многое другое.

#javascript #фронтенд #es2025

Подключаем оплату на сайте за 7 шагов — просто, быстро и безопасно

Если вы — веб‑разработчик, добавляющий оплату в проект или SaaS-продукт, этот материал станет настоящим гайдом. В нём пошагово рассказано, как выбрать платёжный агрегатор, пройти верификацию, получить API-доступ и интегрировать форму оплаты без боли и путаницы.

Вы узнаете о:

— критериях выбора сервиса оплаты;
— порядке регистрации, верификации и безопасного получения ключей;
— советах по настройке сервера, платежной формы, endpoint-ов и прочего.

#бэкенд #платежи

Автоматический деплой Next.js на VPS с CI/CD + E2E тесты

Наконец-то появился видеоурок, который показывает всю мощь Next.js не на теоретических задачах, а на вполне «боевом» проекте. Здесь автор показал, как настроить от начала до конца деплой приложения на Next.js на собственный VPS: от базовой конфигурации до автоматизации с GitHub Actions, включая настройку CI/CD и написание тестов через Jest и Playwright.

Полный стек проекта: React, Next.js app router, FSD архитектура, postgresql, prisma, zod, @tanstack/react-query, react-hook-form, Tailwind CSS, shadcn/ui, next-auth, jest , @testing-library/react, playwright

#фуллстек #nextjs

Создание доступных табов пользовательского интерфейса в JavaScript

В этой статье рассказывается о том, как создать доступные вкладки пользовательского интерфейса с помощью JavaScript. Автор обсуждает несколько методов реализации вкладок и объясняет, как сделать их доступными для пользователей с ограниченными возможностями.

Он также предоставляет код для создания вкладок с помощью клавиатуры и для улучшения доступности визуального интерфейса.

https://blog.logrocket.com/build-accessible-user-interface-tabs-javascript/

#javascript

Мяу-мяу пианино

Этот милый codepen-проект предлагает вам поиграть на «мяукающем» пианино. Нажимать на клавиши вы будете не каким-нибудь курсором, а кошачьей лапкой, извлекая из инструмента соответствующие звуки.

Попробовать поиграть и посмотреть код проекта можно тут:

https://codepen.io/laurenvast/pen/jOrWXej

#codepen

CSS‑функция scroll() — новый способ задавать позиционирование

Вместо того чтобы вычислять координаты через JavaScript и вручную высчитывать положение пользователя на странице для создания полосы прокрутки, теперь можно задать позицию элемента прямо в CSS всего лишь с помощью scroll(). Эта функция — часть CSS Anchor Positioning и позволяет точно управлять тем, как элемент ведёт себя в зависимости от положения якоря.

Здесь вы узнаете, как работает scroll(), какие у неего параметры и как он вписывается в современную систему позиционирования.

#css #фронтенд #scroll