27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
📰 В России запустилась облачная платформа 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
В программировании ты должен читать документацию
100+ SVG-лоадеров в одном месте — шикарная подборка open-source спиннеров, которые можно юзать без ограничений (MIT лицензия)
https://magecdn.com/tools/svg-loaders
➡️ @FrontendPortal | #resourse
⚡️ Бесплатное обучение фронтенду (HTML/CSS + JS + React) с нуля с поддержкой от наставника
Можно неделями гуглить инфу по JS и смотреть туториалы, читать книги, делать задачки в тренажёрах,но всё равно не понимать, как из этого собрать нормальынй сайт.
С 20 июня действующий тимлид и опытный разработчик запускает бесплатное обучение в своём телеграм-канале. Участники разработают фронтенд для копии «Авито»
💡Вот план обучения:
— день 1: Начинаем верстку. Верстаем шапку, элемент Поиск.
— день 2: Про верстку. Верстаем контент главной страницы и карточку товара. Верстаем страницу одного товара
— день 3: Подключаем JS. Изучаем базовые понятия. Обработка событий.
— день 4: Базовое приложение React. Компонентный подход.
— день 5: Переносим верстку в приложение React. Подключаем роутинг. Создаем страничку одного товара
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как джуну стартовать на фрилансе или устроиться на работу
Помимо работы с кодом он даст пошаговый план изучения всего, что нужно современному фронтенду.
Поделится способом трудоустройства.
Расскажет, как взять свой первый заказ на фрилансе без фриланс-бирж с огромной конкуренцией
Подписывайтесь, чтобы участвовать бесплатно
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
📌 Если вы уже пробовали изучать фронтенд, но каждый шаг — это гуглинг, страдание и тысяча вкладок, —
приходите на интенсив. Увидите путь от вёрстки до React и сможете продолжать изучать фронтенд без хаоса в голове.
👉Участвовать бесплатно
Первый урок уже доступен
Надоело искать нужные гит-ветки в бесконечном списке в консоли?
По умолчанию, git branch -l сортирует ветки в алфавитном порядке, из-за чего сложно найти последние
Решение простое – сортировать ветки по дате последнего коммита:
git config --global branch.sort -committerdate
Наткнулся на прикольный плагин для Tailwind с >70 готовыми анимациями + туториал, как его собирали.
Без конфига, просто ставишь, подключаешь плагин и юзаешь классы типа animate-fade-in. Можно кастомизировать длительность, задержку и т.д.
Сайт: tailwindcss-animations.vercel.app
Писали плагин в лайве — есть туториал на YouTube. Отличный способ разобраться, как работает Tailwind изнутри. Ведь классы вроде pl-0, w-full и т.п. тоже используют ту же систему, о которой говорят в видео
➡️ @FrontendPortal | #resourse
26 июня в 15.00 мск пройдет онлайн митап «МойОфис Frontend&UX Talks. Практические решения для сложных интерфейсов в 2025 году: от кода до дизайна».
Современные цифровые продукты становятся все мощнее — и все сложнее. А еще требуют комплексного подхода — от архитектуры кода до продуманного UX. Как создавать сложные интерфейсы, чтобы они оставались удобными? Какие технологии и методы действительно работают в реальных проектах?
Об этом мы и поговорим на митапе: рассмотрим современные инструменты, архитектурные решения, дизайн-системы и методы редизайна, а также покажем рабочие подходы, которые можно применить прямо сейчас, независимо от масштаба вашего проекта.
На митапе выступят:
Руководитель группы разработки МойОфис, участник программного комитета конференции HolyJS Алексей Золотых;
Архитектор веб-направления в «Лаборатории Касперского», соорганизатор MoscowJS, Павел Востриков;
Исследователь пользовательского опыта и клиентских сценариев в Alfa Research Center, тренер и практик дизайн-мышления, Антон Бессонов.
И другие спикеры, в расписании митапа.
Для кого этот митап?
✔️ Для фронтендеров, которые создают не просто код, а удобные и современные интерфейсы.
✔️ Для продуктовых специалистов, которые хотят знать, куда движется индустрия.
✔️ Для дизайнеров, которые хотят глубже понимать технические возможности в разработке дизайна интерфейсов.
Это не просто доклады — это разбор реальных кейсов и живые дискуссии. Присоединяйтесь, чтобы обсудить лучшие практики, задать вопросы спикерам и вдохновиться новыми идеями. Будет полезно!
Реклама
ООО "НОВЫЕ ОБЛАЧНЫЕ ТЕХНОЛОГИИ"
ИНН: 7703807270
erid: 2W5zFHHzwC4
Знал, что в VS Code можно за секунды расшарить свой localhost кому угодно? Это встроенная альтернатива ngrok прямо в редакторе
Если кто не знает, ngrok это средство для пробрасывания (туннелирования) ваших локальных портов наружу, с предоставлением уникального домена
В англоязычном твиттере сейчас активно форсят тему 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;
}
Высшее на новом уровне: онлайн-магистратура от Яндекса и ИТМО. Здесь фундаментальные знания и практика для карьерного роста, а ещё — учёба, которую можно совмещать с работой и жизнью.
IT‑специальность с экспертизой Яндекса + диплом магистра гособразца = новая ступень в карьере. Приёмная кампания уже идёт!
Все подробности — на дне открытых дверей:
— Разбор совместной программы с ИТМО.
— Всё о формате прикладной онлайн-магистратуры: что взяли от классического высшего, а что добавили из опыта специалистов Яндекса.
— Общение с экспертами из вуза и ответы на вопросы.
— Всё про поступление: сроки, экзамены, документы, оплата и образовательный кредит.
▷ Ждём вас 26 июня в 19:00 мск.
→ Зарегистрироваться на встречу
Актуальная и бесплатная книга по TypeScript
Не понимаю, как я это упустил: Matt Pocock совсем недавно выкатил свежую книгу — Total TypeScript Essentials
Книга реально крутая: покрывает всё от настройки окружения и базовых типов до продвинутых кейсов с типизацией и реальных паттернов разработки. Отлично закладывает фундамент.
Забираем абсолютно бесплатно здесь 🍯
➡️ @FrontendPortal
Эволюция HTTP
Поставь лайк, если было интересно ✌️
➡️ @FrontendPortal
Внедрение тёмной темы в интерфейсы — задача не из лёгких, особенно когда дело касается многоцветных SVG-логотипов. Вот и фронтендер из финтех-компании Точка столкнулся с проблемой: при переключении темы логотипы оставались неизменными, поскольку их цвета были жёстко зафиксированы в коде.
В статье на Хабре — о том, как синхронизировать логотипы из Figma с кодовой базой и адаптировать их к тёмной теме. Рассмотрим все решения, которые протестировали фронтендеры из Точки, и подробнее расскажем о самом эффективном из них — внедрении CSS-переменных.
HTML-совет
Не используй input type="number" для важных числовых полей — типа почтового индекса, номера карты и т.п.
Почему?
- На десктопе появляется ненужный спиннер.
- Значение может случайно измениться при прокрутке мыши или нажатии клавиш вверх/вниз.
Вместо этого — используй inputmode="numeric" + pattern
✅ Показывает цифровую клавиатуру на мобильных устройствах — лучше UX.
✅ Добавляет валидацию на цифры.
➡️ @FrontendPortal | #tip by Shripal Soni
Вот быстрый пример, как сделать зум-эффект на картинке, но при этом оставить её внутри рамки. Такое часто встречается на всяких шоп-сайтах
Реализация, ну, буквально как сказано выше: делаем обёртку, ставим overflow: hidden, и зумим картинку внутри.
Важно: для таких анимаций всегда лучше анимировать трансформации типа scale, rotate и т.д., а не трогать напрямую width и height
➡️ @FrontendPortal | #CSS
🚴♂️Не надо изобретать велосипед
Главная ошибка стартаперов — пытаться сделать идеальный продукт, годами его дорабатывать, но так и не выпустить.
В своём канале я запустил челлендж: 12 проектов за 12 месяцев.
1️⃣ Ищем идею под существующий спрос (не из головы!)
2️⃣ Разрабатываем продукт
3️⃣ Занимаемся бесплатным продвижением
4️⃣ Оптимизируем и масштабируем
Формула проста:
1 запуск = 1 функция = решение 1 проблемы
Три главных правила:
✔️ Только проверенный спрос — через поисковые запросы, а не догадки.
✔️ Быстрый запуск — никакого перфекционизма.
✔️ Только США и ЕС — там платят за удобство.
Также в канале разбираю:
— Кто и зачем будет платить за микро-продукт?
— Главная ошибка начинающих стартаперов
— Микро-продукт vs стартап
— Как бесплатно продвигать продукт
Короче, рассказываю в канале без купюр: что работает, а что нет, сколько приносит и как продвигаем. Всё, что обычно скрывают.