27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Совет по CSS
Мы часто используем кнопки действий, появляющиеся при наведении, чтобы интерфейс выглядел чище.
Но пользователи с клавиатурой и на тачскринах не могут инициировать наведение, из-за чего такие кнопки становятся недоступными
Сделай доступным для клавиатуры: используй :focus-within, чтобы показывать кнопки, когда фокус находится внутри контейнера.
Сделай доступным для тачскрина: hover: none сработает, если основное устройство ввода не поддерживает наведение
➡️ @FrontendPortal | #tip by Shripal Soni
TypeScript 5.9 Beta уже доступен
Что нового:
• Поддержка import defer
• Поддержка module: "node20" для require в ESM-модулях
• --init теперь использует современные значения по умолчанию (без даунлевелинга)
• Документация: краткие обзоры DOM API
• Раскрывающиеся тултипы с возможностью углубления в Quick Info
• Улучшения производительности: инстанцирование типов и проверка существования файлов
Установите бета-версию через npm:
npm install -D typescript@beta
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам 🤗
✓ Как научиться отвлекаться от работы и отдыхать?
✓ Как совместить кучу рабочих задач и время с семьей?
✓ Как справиться с прокрастинацией?
✓ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии:
👉 /channel/+fPc1DWN-1jlkNTky
Проблема: вы хотите пробросить JavaScript-ошибку повторно, чтобы выдать более понятное (дружелюбное) сообщение об ошибке. При этом вы хотите сохранить детали исходной ошибки.
Решение: передайте оригинальную ошибку через cause
Подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause
➡️ @FrontendPortal | #js #tip
Пишем более лаконичный код CSS
➡️ @FrontendPortal | #CSS
Низкий контраст — самая частая и самая игнорируемая проблема доступности.
Текст с низким контрастом снижает читаемость сайта для всех пользователей, особенно для людей с нарушениями зрения
DevTools помогут навести порядок:
🔸Найди проблемные места — через CSS Overview, вкладку Issues или отчёт Lighthouse.
🔸Пофиксь цвета — в инспекторе наведи на элемент, появится тултип с варнингом и предложениями в Color Picker. Можно выбрать и вручную — с учётом AA/AAA
🔸Эмулируй нарушения зрения — и проверь, как твой UI видят другие.
Подробнее здесь
➡️ @FrontendPortal | #tip
Одна из недооценённых фич CSS Grid - это возможность легко накладывать элементы друг на друга, прямо как слои.
Без Grid пришлось бы возиться с position: absolute, что не всегда удобно и гибко.
Отлично работает для коллажей, обложек, баннеров, блоков с заголовками и любых случаев, где нужно управляемое наложение
➡️ @FrontendPortal | #tutorial
В англоязычном твиттере сейчас активно форсят тему llms.txt — способ объяснять сайт LLM'кам.
Сайты для поисковиков мы давно научились готовить: SSR, sitemap.xml, robots.txt, SEO и всё такое. А вот когда за сайт берётся LLM, то сталкивается с критическим ограничением — слишком маленькое окно контекста, чтобы влез весь HTML с навигацией, баннерами и JS
Суть идеи простая: кидаешь в корень /llms.txt, пишешь в markdown краткую выжимку о проекте — что это, как устроено, где дока. Плюс предлагается, чтобы страницы сайта, содержащие полезную для LLM информацию, имели чистую markdown-версию по тому же URL, но с суффиксом .md
Формат пока не стандартизирован (до W3C ещё не дошло), но пропозал бодрый и уже работает. Vercel, например, свой llms.txt уже выкатили — vercel.com/docs/llms.txt
Подробнее: https://llmstxt.org/
➡️ @FrontendPortal
🔥 Успех в IT = скорость + знания + окружение
Здесь ты найдёшь всё это — коротко, по делу и без воды.
Пока другие ищут, где “подглядеть решение”, ты будешь использовать самые передовые инструменты!
🖥 ИИ: t.me/ai_machinelearning_big_data
🖥 Python: t.me/pythonl
🖥 Linux: t.me/linuxacademiya
🖥 C++ t.me/cpluspluc
🖥 Docker: t.me/DevopsDocker
🖥 Хакинг: t.me/linuxkalii
🖥 Devops: t.me/DevOPSitsec
🖥 Data Science: t.me/data_analysis_ml
🖥 Javascript: t.me/javascriptv
🖥 C#: t.me/csharp_ci
🖥 Java: t.me/javatg
🖥 Базы данных: t.me/sqlhub
👣 GO: t.me/Golang_google
🖥 React: t.me/react_tg
👣 Rust: t.me/rust_code
🧠 Нейросети: t.me/vistehno
🖥 PHP: t.me/phpshka
🖥 Android: t.me/android_its
💼 Вакансии: t.me/addlist/_zyy_jQ_QUsyM2Vi
Спустя более 20 лет вышла новая спецификация PNG
Рабочая группа PNG выкатила третье издание спецификации Portable Network Graphics со статусом W3C Recommendation
Что завезли:
— Полноценная поддержка HDR: расширенный диапазон яркости и более глубокая цветопередача. Картинка теперь может быть значительно качественнее — и всё это в 4 байтах (плюс стандартный overhead PNG-чaнков)
— Поддержка APNG (анимированные PNG!) теперь официальная
— Поддержка Exif-метаданных: теперь можно хранить в PNG метаданные — авторство, камеру, линзы, GPS и прочее
Уже работает в большинстве браузеров и графических тулов
https://www.w3.org/TR/png-3/
@IT_Portal
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
Айтишники поймут
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠ
ᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠᅠ
Вы знали, что в Chrome DevTools есть функция CSS Overview?
Она предоставляет полный анализ цветов, шрифтов, медиазапросов и неиспользуемых стилей на вашем сайте — всё в одном месте
➡️ @FrontendPortal | #tip
Этот HTML-косяк непростителен 🦯
Не использовать атрибут inputmode в элементах input — серьёзная ошибкаinputmode подсказывает браузеру, какую экранную клавиатуру отобразить пользователю для конкретного поля ввода. Используется с элементами <input> и <textarea>
Улучшай UX, показывая подходящую клавиатуру под тип ввода.
Работает и на Android, и на iOS
➡️ @FrontendPortal | #HTML
Знаете ли вы, что соцсети и мессенджеры вроде WhatsApp умеют подтягивать метаданные из вставленной ссылки? Секрет в том, что сам сайт должен предоставить и описать эти детали
Сюда относятся:
🔸 Заголовок
🔸 Картинка для превью — баннер, изображение продукта и т.п.
🔸 Текстовое описание и другое
Всё это делается с помощью специальных мета-тегов по стандарту, известному как Open Graph Protocol.
Попробуйте включить их на своём сайте ✌️
➡️ @FrontendPortal | #HTML #разное
Выравнивание последней строки текста
В случае необходимости выравнивания последней строки используйте text-align-last, значения свойства совпадают с text-align
.text {
text-align-last: right;
}
Пишем более лаконичный код JS
Похоже, вам понравился прошлый пост на эту тему, в этот раз держите несколько интересных сокращений и операторов JavaScript
Если вы хотите узнать больше, то вот возможности, использованные в этом посте:
- Оператор нулевого присваивания (??=)
- Оператор нулевого слияния (??)
- Оператор расширения
- Опциональная цепочка '?.'
- Деструктурирующее присваивание
- Динамические имена свойств
➡️ @FrontendPortal | #js
Мощное SEO-расширение для веб-разработчиков
Находит ошибки на странице, выявляет битые ссылки и подсказывает, что можно улучшить
https://www.metaexplorer.co/
➡️ @FrontendPortal | #resourse
Вы, возможно, знакомы с единицей vh в CSS. 100vh — это высота вьюпорта.
На десктопах высота вьюпорта фиксирована, но на мобильных устройствах всё сложнее: при скролле вниз вьюпорт меняется — браузеры обычно скрывают элементы интерфейса (например, навигацию), чтобы освободить больше пространства.
В итоге возникает неоднозначность: что именно означает vh?
Чтобы решить эту проблему, CSS недавно получил новые единицы измерения
🔸 100svh (small viewport height) — это минимально возможная высота вьюпорта, когда все элементы интерфейса отображаются.
🔸 100lvh (large viewport height) — это максимально возможная высота вьюпорта, когда вся навигация и UI-элементы скрыты полностью
🔸 Есть также 100dvh (dynamic viewport height) — динамическая высота вьюпорта, которая автоматически переключается между svh и lvh в зависимости от того, видны ли UI-элементы.
➡️ @FrontendPortal | #CSS
Angular теперь встроен в Chrome DevTools
Команды Angular и Chrome заморочились и сделали мощную интеграцию: теперь Angular-специфичные штуки — компоненты, хуки, шаблоны, DI — прямо в Chrome DevTools, во вкладке Performance
Теперь профилирование стало максимально наглядным ✌️
https://blog.angular.dev/the-angular-custom-profiling-track-is-now-available-0f9d8d36218a
➡️ @FrontendPortal
📈 Пора повышать грейд! 10 июля в 20:00 пройдет бесплатный вебинар по теме "Как стать уверенным JavaScript-разработчиком: план от джуна до мидла". Запись ограничена: https://tglink.io/05277c4fdfc0
Что будет на вебинаре?
🗝 Что отличает джуна от сильного специалиста: структура знаний, подходы, ответственность.
🗝 Какие технологии важны в 2025 году: React, TypeScript, API, архитектура.
🗝 Почему "копипастить с GitHub" недостаточно — нужно понимать, как и зачем работает код.
🗝 Как избежать «плато развития» и начать расти — по-настоящему.
🗝 Как выстроить план обучения и выйти на следующий уровень — без метаний и хаоса.
Чему вы научитесь:
✅ Как сформировать ядро необходимых навыков и убрать лишнее.
✅ Какие инструменты и технологии действительно ускоряют рост.
✅ Как распознать “синдром джуна” и избавиться от него через практику.
✅ Почему важна архитектура, а не просто знание синтаксиса.
💥 Оставляйте заявку на бесплатный урок и получите спец. предложение: https://tglink.io/05277c4fdfc0
erid: 2W5zFHxUFVA
Библиотека UI-компонентов в ретро-стиле, которые можно скопировать и вставить в свои приложения. Бесплатно. С открытым исходным кодом
https://www.8bitcn.com/
➡️ @FrontendPortal | #resourse
📰 В России запустилась облачная платформа OneEntry — бесплатный backend с SDK для веб и мобильной разработки
OneEntry официально стартовала в России. Это облачная платформа, которая предоставляет готовый backend с административной панелью, SDK и всей необходимой инфраструктурой — без подписок и ограничений. Решение ориентировано на разработчиков, которые хотят сосредоточиться на frontend’е, не тратя время на настройку серверной части и DevOps.
☁️ OneEntry подключается к любому приложению через SDK и не навязывает структуру данных.
Платформа поддерживает JavaScript/TypeScript и все современные фреймворки: React, Next.js, Vue, Nuxt, Angular, React Native. Есть нативные SDK для Swift и Kotlin.
✅ Что важно знать о SDK:
• Полная типизация без лишних зависимостей
• Удобные методы работы с API
• Встроенная документация прямо в коде
📊 Функциональные возможности платформы:
• Создание и управление структурами данных через админку
• Мультиязычный интерфейс
• Роли и личные кабинеты пользователей
• Формы и сбор пользовательских данных
• Редактирование в реальном времени через WebSocket
🛒 Инструменты для e-commerce:
• Автоматическая генерация превью
• Оптимизация изображений
• Удобная работа с вложенными структурами
• Управление товарами, статусами и связями
• Приём оплат, заказы, рассылки, push-уведомления
• Массовая загрузка данных: Excel, XML, CSV, папки
• Интеграции через визуальный LowCode-редактор
• Поддержка собственных модулей на Node.js, Python и PHP
📌 Полезные ссылки:
— Платформа: oneentry.ru
— Документация: doc.oneentry.ru
— SDK: js-sdk.oneentry.ru
— Видеоинструкции: rutube.ru/channel/64747617
#новость
Совет по CSS: Используйте табличные цифры для отображения таймеров
Cвойство font-variant-numeric определяет, как будут отображаться числа. При значении 'tabular-nums' числа будут представлены с одинаковой шириной, что позволит им идеально выстраиваться в ряд
➡️ @FrontendPortal | #CSS #tip by Shripal Soni
Простой способ сделать градиентный текст в CSS
Свойство background-clip определяет, как фоновое изображение или цвет должны быть обрезаны относительно границ текста. В данном случае установлено значение text, что означает, что фон должен быть обрезан по контуру текста.
Также мы используем свойство -webkit-text-fill-color, чтобы сделать цвет текста прозрачным
h1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
CSS table-layout
Свойство предназначено для управления режимом формирования ширины столбцов в таблице
/*Для корректной работы fixed обязательно должна быть задана ширина таблицы */
table {
table-layout: fixed;
width: 100%;
}
/* обрезаем текст, не влезающий в ячейку */
td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
auto(по умолч.) и fixed заключается в том, как браузер распределяет ширину столбцов в таблице. auto определяет ширину столбцов на основе их содержимого, тогда как fixed определяет их на основе ширины самой таблицы и заданных ширин столбцов
Gemini CLI — опенсорс AI-агент для разработчиков от Google, который работает прямо в терминале
На борту — Gemini 2.5 Pro, контекст 1М токенов, 60 запросов/мин и 1000 в сутки — бесплатно (нужен только гугл-аккаунт)
Можно писать и дебажить код, автоматизировать задачи, ресерчить
При желании можно прикрутить любой MCP сервер. Например, генерировать прямо из терминала картинки (Imagen) или видео (Veo)
npm install -g @google/gemini-cli
Облако + DevOps — всё в одном. Вы просто развиваете продукт
Обычно компании делают так:
— Арендуют ресурсы в Яндекс или AWS
— Ищут DevOps-инженера, чтобы всё настроить
— Теряют время и деньги на запуск
Мы сделали иначе.
Создали свое приватное облако, где вы получаете:
— Изолированную среду под ваш проект
— GitLab, CI/CD, Kubernetes, мониторинг и другие сервисы — по запросу
— Поддержку инженеров в Telegram — без тикетов и заморочек
Мы настраиваем инфраструктуру под ваши задачи и сопровождаем её. Вы просто делаете продукт — мы берём остальное.
• Прозрачный калькулятор
• Персональные условия
• Без ожиданий, без лишних звеньев
Бесплатная консультация:
@cicdlab_info
https://cicdlab.ru/
Вышел релиз Chrome 138
• AI API в браузере — теперь можно использовать следующие AI-функции непосредственно в браузере, на устройстве пользователя:
- Translator API — добавление перевода в веб-приложения в реальном времени.
- Language Detector API — определение языка текста
- Summarizer API — генерация кратких резюме для статей, чатов и отзывов
• Новые CSS-функции:
- progress() — вычисляет, насколько заданное значение продвинулось между двумя другими, и возвращает результат в виде числа без единиц измерения
- sibling-index() и sibling-count() — используются для стилизации элементов на основе их позиции среди соседей. Больше никаких :nth-child(1), :nth-child(2) и т.д
- abs() и sign() — вычисление модуля и знака числа.
• С помощью Viewport Segments API можно адаптировать вёрстку под складные устройства
Подробнее: https://developer.chrome.com/blog/new-in-chrome-138
➡️ @FrontendPortal
Как оптимизировать PostgreSQL и не лишиться сна: разбор для разработчиков
Когда вы разворачиваете веб-приложение, чаще всего веб-сервер, бэкенд, база данных и авторизация оказываются на одном сервере.
Тестировщики и менеджер счастливы — все летает. Но потом приложение выходит в продакшн и начинается боль. Запросы тормозят и отвечают по пять секунд, CPU не загружен даже на треть, а веб-сервер выдает 504 Gateway Timeout.
И вот вы сидите ночью и чините прод, потому что PostgreSQL не просто «табличка с данными», а сложный инструмент с кэшем, индексами, буферами и планировщиком запросов.
Как избежать такой ситуации и грамотно подойти к проектированию схем — рассказали в статье Академии Selectel.
Переходите по ссылке и учитесь настраивать СУБД правильно.
Реклама, АО «Селектел», ИНН: 7810962785, ERID: 2VtzqvzizHL
В программировании ты должен читать документацию