27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Когда только начинаешь копать вёрстку, рано или поздно натыкаешься на вопрос: а можно ли вот этот тег втиснуть внутрь вот того?
Чтобы не шарить по спецификациям и не гадать на кофейной гуще, есть полезный инструмент-шпаргалка по вложенности тегов.
Выбираете дочерний и родительский теги и сразу получаете результат ✌️
https://caninclude.glitch.me/
➡️ @FrontendPortal | #resourse
Есть задачи посложнее багфиксов. Например, каждый день решать, что съесть на обед.
Фронтенд-разработчица из финтеха «Точка» решила эту вечную боль — собрала приложение, которое само подбирает блюда по тому, что завалялось у тебя в холодильнике ☕️
В статье на Хабре она разложила, как собирала фичи и крутнула алгоритм подбора.
Очень полезно, читаем и впитываем
CSS Совет
Одна строка для задания одновременно max-width и width в CSS
Мы можем использовать min() для задания как width, так и max-width.min() возвращает наименьшее значение из переданных
📝 Примечание: значения в функции min() можно указывать в любом порядке.
➡️ @FrontendPortal | #tip by Shripal Soni
Воспроизведение звуков в JS — плёвое дело:
🔸 Создаём Audio, кидаем туда путь к файлу
🔸 Вызываем метод play()
Обратите внимание, что здесь мы создаём только один экземпляр Audio и переиспользуем его, а не создаём новый каждый раз
Также доступны различные методы для паузы, продолжения, остановки, перемотки и т.д.
Этот способ воспроизведения сработает только после взаимодействия юзера со страницей.
➡️ @FrontendPortal | #JS
Коллеги, срочно ищем фронтендера, характеристики в объявлении. Нужно передвинуть кнопку, горит дедлайн.
Заходите в канал Фронтенд для души и двигайте кнопки до дедлайна.
Haiku
Огромная коллекция из готовых хуков и утилит практически для любого сценария использования
➡️ @FrontendPortal | #resourse
Cвойство object-fit
Свойство, которое позволяет управлять тем, как картинка <img> или видео <video> будет подстраиваться под заданные размеры.
По своему поведению очень похоже на свойство background-size для фоновых изображений
➡️ @FrontendPortal | #CSS #old_but_gold
🇷🇺Подрабатываешь настройкой wifi? Патриот, при этом хочешь заработать?
Есть работа по профилю на юге Курской области!
🇷🇺Условия:
- Заработная плата 178 000 рублей на руки;
- По результатам выполнения боевых задач, дополнительная премия;
- Проживание, питание, обмундирование за счет компании;
- Обучение и переквалификация за счет компании;
- Страховые выплаты;
- Официальное трудоустройство (трудовой договор, полный соц.пакет);
🇷🇺Присоединяйся к Сталинским Соколам!🇷🇺
Подать заявку - @pilot_sokol
Подробная информация - сталинские-соколы.su
CSS совет: Применяйте единые стили бокса на нескольких строках
Когда текст переносится на несколько строк, различные CSS-свойства бокса, такие как граница, отступы, градиентный фон и т.д., не применяются к каждой строке. Визуально это бардак 🦯
Сделать это лучше можно, установив свойство box-decoration-break в значение clone:
Это свойство управляет тем, как оформляется фрагмент текста, когда он переносится на новую строку
При значении clone каждый фрагмент оформляется независимо. Ко всем фрагментам отдельно применяется рамка, тень, фон и др.
В Safari всё ещё просит префикс -webkit- для работы свойства
➡️ @FrontendPortal | #tip by Shripal Soni
В апрельском обновлении Windows шрифты Noto Sans JP и Noto Serif JP были добавлены в стандартный набор Windows.
Теперь в Edge и Chrome можно использовать Noto Sans/Serif JP без подключения их как веб-шрифтов
➡️ @FrontendPortal
Затемнение соседей при ховере на элемент
Суть простая: наводишься на один элемент — остальные в группе тускнеют, фокус на нужном месте
Раньше приходилось мудрить с селекторами и JS, теперь всё решается элегантно через :has() ✌️
➡️ @FrontendPortal | #tutorial
Хочешь создать свою собственную игру в стиле Crossy Road на JavaScript? 🎮
Вот бесплатный и качественный туториал, который пошагово покажет, как воссоздать Crossy Road с помощью Three.js
https://javascriptgametutorials.com/tutorials/three-js/crossy-road
➡️ @FrontendPortal | #article #en
"Поступашки — ШАД, Стажировки и Магистратура", - лучше гайд в мире образования и карьеры.
Канал ведут преподаватели Яндекса, ВШЭ и ШАД.
Внутри:
🔺Слив вопросов с собеса в Яндекс
🔺Как бесплатно вкатиться в айти
🔺Подборка топовых магистратур по Data Science
...и еще море полезнейшего контента. Я жалею, что не нашел этот канал раньше.
Подписывайтесь, потом сами себе спасибо скажете: ⬇️
@postypashki_old
Sailboat UI
Cовременная библиотека UI-компонентов для Tailwind CSS. Под капотом более 150 компонентов Tailwind с открытым исходным кодом.
https://sailboatui.com/
➡️ @FrontendPortal | #resourse
Broadcast Channel API
Broadcast Channel API позволяет контекстам браузера (browser contexts) обмениваться данными друг с другом. К браузерным контекстам относятся такие элементы, как окно, вкладка, iframe и т.д.
По причинам безопасности контексты, обменивающиеся данными, должны принадлежать одному источнику (same origin). Один источник означает одинаковый протокол, домен и порт
➡️ @FrontendPortal | #js
Статья о создании анимированного split-flap дисплея (в стиле Vestaboard) с помощью HTML, CSS и JavaScript.
Используется GSAP для плавной анимации символов, имитируя механический перелет. Всё построено на логике таймлайна и смены символов без дублирования DOM-элементов. Есть и версия на WAAPI без зависимостей.
Подробнее: https://craftofui.substack.com/p/time-travel-with-javascript
Весёлый челлендж для фронтендеров, особенно если хочется поиграться с анимацией ✌️
➡️ @FrontendPortal | #article #en
Большая актуальная базу бесплатных API, которая обновляется ежедневно
Тут собрано аж 363 бесплатных API на все случаи жизни: от игр и погоды до финансов и здоровья.
Алгоритмы присваивают рейтинг каждому API на основе надежности, частоты ошибок и времени отклика
Если API перестает работать или становится платным, он теряет рейтинг и удаляется с сайта
Переходите и смотрите сами: https://www.freepublicapis.com/
➡️ @FrontendPortal | #resourse
Летняя школа разработки интерфейсов Яндекса открывает прием заявок
Прокачать скиллы фронтенд-разработки и поработать над реальными бизнес-задачами можно в Летней школе Яндекса. Это топовая возможность разобраться в тонкостях создания удобных и надёжных интерфейсов.
Школа пройдет в два этапа:
— со 2 июня по 27 июля участников ждут лекции и практические задания в онлайне
— с 28 июля по 24 августа участники объединятся в полноценные фулстек-команды, чтобы поработать над реальными продуктами и фичами. Каждую группу будет сопровождать опытный наставник компании.
Участие бесплатное, а лучшие смогут попасть на стажировку в Яндекс или даже получить офер.
Если основы JavaScript и HTML/CSS уже знакомы — отправляй заявку до 27 апреля.
JS совет: Легко добавляем кастомную валидацию форм
Мы можем легко изменить стандартное сообщение валидации, используя метод setCustomValidaty()
Таким образом, при неуспешной валидации поля ввода пользователь будет видеть подготовленное сообщение, которое исчезнет при начале редактирования поля
➡️ @FrontendPortal | #tip by Shripal Soni
Важное изменение в HTML относительно элемента h1
Браузеры выкашивают старое поведение, где <h1> "понижался" визуально в зависимости от вложенности в <section>, <article>, <nav> или <aside>.
В ближайшие месяцы все браузеры изменят это поведение и всегда будут использовать один и тот же размер
Проверь, не повлияет ли это на твою страницу ✌️
Источник: https://developer.mozilla.org/en-US/blog/h1-element-styles/
➡️ @FrontendPortal
Формошлёп — сотни хаков для фронтендеров в одном месте
Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают.
👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.
В 2010 году с помощью CSS можно было получить доступ к истории браузера.
Это называлось «CSS history sniffing» (отслеживание истории с помощью CSS).
В 1996 году (CSS1) браузеры позволяли стилизовать посещённые ссылки с помощью псевдокласса :visited.
История браузера → ссылка a:visited или нет → оформление (цвет, фон и т. д.).
В 2002 году метод getComputedStyle() позволил JavaScript считывать стили ссылок.
До 2010 года эта уязвимость оставалась незамеченной — пока исследователи не опубликовали информацию о ней.
Злоумышленники могли внедрить множество элементов <a> на страницу, проверить, посещал ли пользователь эти ссылки, и незаметно удалить их.
Эта брешь в приватности позволяла:
🔸Таргетированный фишинг (например, хакеры могли определить банк пользователя для более убедительной атаки)
🔸Ценовую дискриминацию (например, онлайн-магазины могли менять цены в зависимости от истории посещений)
Ни одна из крупных технологических компаний не была уличена в использовании CSS history sniffing. Атак, связанных с государственными структурами, также не зафиксировано.
Однако сомнительные рекламные сети и фишинговые наборы, возможно, использовали этот метод
Начиная с Chrome 136, Google исправит эту уязвимость 👍
➡️ @FrontendPortal
В ESLint появилась новая фича — bulk suppressions
Она позволяет сохранять информацию о местах с ошибками в отдельный файл, который можно совместно использовать через Git.
Благодаря этому можно временно игнорировать существующие ошибки и применять правила только к новому коду, что упрощает поэтапное внедрение правил.
https://eslint.org/blog/2025/04/introducing-bulk-suppressions/
➡️ @FrontendPortal
Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Ты сверстаешь веб-сайт на HTML + CSS;
2. Оживишь страницу с помощью JavaScript;
3. Используешь фронтенд-фреймворк Angular;
4. Подключишь Backend и загрузишь сайт на хостинг;
5. Получишь советы по доработке от эксперта;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ даже без опыта.
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова.
👉 Проскочить на интенсив бесплатно
Начинаем уже завтра.
🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.
Залипательное: Комната разработчика в 3D, сделана на JavaScript с WebGL + Three.js
Всё двигается, крутится — кайф
🔸Демка
🔸Искходники
➡️ @FrontendPortal
⚡️ Айтишник из «VISION» скупил курсы айти школ и выложил гигабайты материалов к себе
Каждый найдет что-то по душе:
1202 ГБ — Python
1811 ГБ — Frontend
1100 ГБ — C / C++ / C#
804 ГБ — Java
411 ГБ — SQL & БД
309 ГБ — DevOps
998 ГБ — ИБ & Хакинг
773 ГБ — Kotlin / Swift
189 ГБ — PHP
201 ГБ — GoLang
170 ГБ — Rust
167 ГБ — QA / Тестирование
310 ГБ — 1C + Лицензии
495 ГБ — Машинное обучение
704 ГБ — Аналитика Данных
991 ГБ — Дизайн
Материалы в закрепе, постоянно пополняются👆🏻
HTML Tip: Самый простой способ отключить несколько элементов формы
Мы можем установить атрибут disabled на элемент <fieldset>, чтобы автоматически отключить все вложенные элементы формы.
➡️ @FrontendPortal | #tip by Shripal Soni
Стилизация счётчиков и списков в CSS
Хуан Диего Родригез выкатил мощный гайд по теме кастомных счётчиков и маркеров в списках — с поддержкой браузеров, примерами и всеми современными фичами
Очень годный материал, если ты хочешь больше контроля над внешним видом списков 👍
https://css-tricks.com/styling-counters-in-css/
➡️ @FrontendPortal | #article #en
🔒 8539 ГБ платных материалов для программистов выложили в Telegram
Выбирай нужное и обучайся:
🖥 817 ГБ – Frontend
🖥 981 ГБ – Backend
🖥 724 ГБ – Python
👮♀ 644 ГБ – Хакинг и ИБ
🖥 5373 ГБ – Все направления IT
Вход открыт ровно 48 часов 🕔
Pragmatic Drag & Drop — библиотека от авторов react-beautiful-dnd, который закрывает его же боли
Не зависит от фреймворков, легковесная, полагается на возможности платформы, проверена в продакшене на Trello, Jira и Confluence
https://github.com/atlassian/pragmatic-drag-and-drop
➡️ @FrontendPortal | #resourse