27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Принес крутейший сайт для прокачки алгоритмов — визуальный тренажёр с пошаговым выполнением кода
70+ алгоритмов на JavaScript, Java и C++, всё интерактивно и с наглядной визуализацией
https://algorithm-visualizer.org/
➡️ @FrontendPortal | #resourse
🎉 Большой розыгрыш от крупнейшего IT-медиа 1337, легендарного паблика Рифмы и Панчи, канала Техно.
Победителей будет много, а для участия нужны лишь пара кликов:
1. Подписаться на Рифмы и Панчи, 1337 и на Техно.
2. Нажать «Участвовать» под этим постом
Что по призам:
1 место - Iphone 16 Pro
2 место - PS5 Slim
3 место - Nintendo Switch 2
4-10 места - 10 000 рублей на карту
Ограничиваем текст заданным числом строк 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
Реализация паузы/старта видео в зависимости от состояния видимости страницы
Page Visibility API — это API браузера, который проверяет видимость страницы. Он помогает определять, скрыта или свернута текущая страница, и тем самым позволяет контролировать ее поведение и использование ресурсов
const video = document.querySelector('video');
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
video.pause();
} else {
video.play();
}
});
Откопал вам годноту для прокачки JS — 200+ упражнений для практики JavaScript, отсортированных по темам и уровню сложности
Забираем здесь 🍯
UPD: Бесплатно доступна только часть задачек из каждого раздела, полный доступ требует подписки:(
UPD2: Вот ещё подборка ресурсов с задачками по JS:
- Codewars / Leetcode
- W3resource
- Герой JS
- Edabit
- javascript30
- BFE.dev
- Exercism
➡️ @FrontendPortal | #resourse
Предотвращение цепной прокрутки с помощью 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