27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Ограничиваем текст заданным числом строк c помощью CSS-свойства line-clamp
Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие. Cвойство работает только в комбинации вспомогательных свойств:
.text {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient:vertical;
overflow: hidden;
}
🧑🏻💻Хотите стать востребованным разработчиком и научиться работать с самым популярным фреймворком для Frontend-разработки?
Курс «React.js Developer» от OTUS — это ваш шанс освоить технологии, которые используют лидеры индустрии. Изучите продвинутые возможности Redux, научитесь создавать SPA-приложения, оптимизировать их для production и писать чистый код с TypeScript. Освойте GraphQL, Apollo, Webpack и Babel — всё, что нужно для работы с современными веб-технологиями.
Программа курса составлена опытными практиками, актуальна для сегодняшнего рынка и постоянно обновляется.
🔥Не упустите свой шанс! Пройдите короткое вступительное тестирование и узнайте подходит ли вам наш курс:
https://otus.pw/JrOY/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Причина, почему твой React-код отстой — это useEffect + setState
не синхронизируй локальное состояние внутри useEffect — это делает твой код чрезмерно сложным для понимания
Нужен источник вдохновения для бенто-сеток? Этот сайт — настоящая находка: сотни примеров реальных Bento UI, использующихся на топовых сайтах
https://bentogrids.com/
➡️ @FrontendPortal | #resourse
Наглядная разница между «opacity: 0» и «visibility: hidden» и «display: none» в CSS
➡️ @FrontendPortal | #CSS
CodePen дня: Чекбокс, который невозможно отметить
Думаешь, сможешь поставить галочку... а ты попробуй 👍
https://codepen.io/jh3y/pen/LYNZwGm
➡️ @FrontendPortal | #codepen
Этот чувак сделал крестики-нолики ТОЛЬКО на CSS (без HTML и JS)
Смотрю на это уже полчаса и до сих пор не понимаю, как оно работает. Какая-то магия с container queries, allow-discrete, кастомными типизированными свойствами.
Если открыть DevTools в Firefox — там буквально ничего нет. Вот тут можно самому потыкать: https://lyra.horse/fun/tic-tac-nohtml/
➡️ @FrontendPortal
Пишем более лаконичный код 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
Предотвращение цепной прокрутки с помощью overscroll-behavior
Если мы попытаемся выполнить прокрутку, когда граница скроллинга достигнута, то прокрутка будет выполнена в ближайшей родительской области скроллинга, что называется цепочкой прокрутки(scroll chaining)
Мы можем предотвратить цепочку прокрутки, установив для свойства overscroll-behaviour значение contain или none
- Подробнее
- Поиграть можно здесь
➡️ @FrontendPortal | #CSS #tip by Shripal Soni
Принес небольшую бесплатную утилиту, с помощью которой можно быстро собирать крутые CSS-паттерны для фона сайта
Тут собрана коллекция паттернов на чистом CSS, всё параметризовано — можно легко кастомизировать и забирать себе бесшовные фоны. Коллекция регулярно пополняется
Забираем здесь
➡️ @FrontendPortal | #resourse
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке от эксперта;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ даже без опыта.
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем уже завтра.
🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.
Дружеское напоминание: у нас есть уютный чатик по фронтенду, где мы делимся опытом, помогаем друг другу и просто общаемся 💩
Присоединяйтесь: /channel/+dovW4_8UgogxNmMy
➡️ @FrontendPortal
Жара в IT! Теперь популярные языки программирования можно легко выучить по гайдам в картинках
Бесплатные инструменты, полезные ресурсы, а также советы и задачки. Выбирай нужное направление и учись не напрягаясь:
👩💻 Linux Ninja
🖥 CodHub | Курсы IT
📱 Python | Программирование
😷 Hacking | Кибербезопасность
⚙️ Webdev | Backend & Frontend
🖥 Программирование по мемам
Отзывчивая сетка CSS Grid одной строкой кода
Используя Grid, мы можем создать отзывчивый набор столбцов, которые создают сами себя по мере необходимости
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
Совет по 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