27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Быстрый совет по VS Code
Используй сочетание клавиш Ctrl + Shift + F, чтобы быстро выполнить поиск по всем файлам проекта
Очень удобно для нахождения нужных фрагментов кода без открытия каждого файла
➡️ @FrontendPortal | #tip
Обнаружение статуса соединения
Для отслеживания статуса подключения можно использовать navigator.online API. Это вернет логическое значение, чтобы указать, находится ли пользователь в сети.
Мы можем подписаться на офлайн- и онлайн-события, чтобы узнавать об этих конкретных изменениях
window.addEventListener('offline', (e) => {
console.log('offline');
});
window.addEventListener('online', (e) => {
console.log('online');
});
Не просто кнопка "Загрузить": Секреты работы с файлами в React
🎓 19 мая в 20:00 — бесплатный вебинар для разработчиков, которые хотят делать удобную и безопасную загрузку файлов в React-приложениях.
Что покажем:
— Drag & Drop, предпросмотр, валидация — всё, что ждали от UX;
— Обработка PDF, Excel и изображений прямо в браузере;
— Как не «положить» интерфейс при загрузке тяжёлых файлов;
— Защита от XSS, проверка MIME-типов и другие нюансы безопасности.
📌 Для фронтендеров и fullstack-разработчиков, которым важна клиентская оптимизация.
В программе — реальные примеры кода, которые можно сразу использовать.
Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение.
Регистрация: https://otus.pw/DhHq/
Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576
Совет по CSS: аккуратнее с vh
На мобилках 100vh не учитывает исчезающие тулбары
Решение — dvh: он всегда подстраивается под фактическую высоту окна. Так ваш дизайн использует всё доступное пространство, избегает обрезки и улучшает UX
➡️ @FrontendPortal | #tip
Сегодня день рождения CSS2 💃
12 мая 1998 года W3C выкатил официальные рекомендации по спецификации CSS2.
Тогда в стандарт завезли фичи вроде абсолютного, относительного и фиксированного позиционирования элементов — и многое другое.
➡️ @FrontendPortal
Там в VSCode подъехала обнова. Одна из годных фич — автогенерация alt для картинок
Навёлся на тег с картинкой → Ctrl + . или лампочка → готово.
Поддерживаются HTML и Markdown.
Пользуйтесь ✌️
➡️ @FrontendPortal
Нашёл для вас крутейший интерактивный курс по Git прямо в VS Code — GitByBit
Это тренажёр, где ты учишься Git через практику: 48 уроков по 5-10 минут каждый
Есть классная фишка — "Гитопедия", где собираешь знания по ходу обучения. Плюс квизы, чтобы всё усвоить
Всем, кто хочет научиться гиту с нуля, рекомендую заценить ✌️
➡️ @FrontendPortal | #resourse
Форматирование чисел и Intl.NumberFormatIntl.NumberFormat один за конструкторов Internationalization API, который используется для форматирования чисел, валюты, процентов и единиц измерения, таких как длина, температура и др.
Этот конструктор принимает локаль и объект с настройками
new Intl.NumberFormat(locale, options).format(number)
Дорога до вуза, задания, встречи с друзьями...Где найти энергию на все? 🤯
Lamoda поможет не тратить силы на лишнее — работай удаленно или в гибридном формате на новой оплачиваемой стажировке! 😎
Подавай заявку до 16 мая, чтобы воспользоваться и другими комфортными условиями: 👇
— зарплатой 90 000 или 65 000 рублей в зависимости от направления
— гибким графиком: работай от 30 часов в неделю
— полезными бенефитами: ДМС для экстренных случаев, корпоративными скидками, обучением и другим
— карьерными перспективами: ты сможешь остаться в штате Lamoda
Переходи на сайт — там ты найдешь еще больше крутых преимуществ работы в Lamoda! https://vk.cc/cLCvYq?erid=2W5zFHrQthW
Нужно сравнить два изображения на своём сайте? Это официальный компонент Google.
✓ Занимает всего 3 КБ
✓ Имеет встроенные стили
✓ Работает на мобильных устройствах
✓ Совместим с любым фреймворком
Установка → npm install two-up-element
➡️ @FrontendPortal | #resourse
⚡️ Дождались! Ребята сделали крутейшие каналы про Айти
Здесь сложные темы объясняют на простых картинках, понятном языке. А также решаем задачки, делимся ресурсами и советами.
📱 Python | Программирование
⚙️ Webdev | Backend & Frontend
😷 Hacking | Кибербезопасность
🖥 Memes | Мемы айтишников
🖥 CodHub | Курсы IT
Простой совет по JavaScript
Знаете ли вы, что в JavaScript существует событие "resize", которое срабатывает каждый раз, когда изменяется размер окна области просмотра браузера?
➡️ @FrontendPortal | #tip
GSAP теперь на 100% БЕСПЛАТЕН
Благодаря Webflow, GSAP теперь полностью бесплатен, включая ВСЕ бонусные плагины, такие как SplitText, MorphSVG и остальные, которые ранее были доступны только участникам Club GSAP
➡️ @FrontendPortal
Событие beforeunload
Это событие позволяет веб-странице вызвать диалоговое окно подтверждения, спрашивающее пользователя, действительно ли он хочет покинуть страницу
Событие происходит перед событием выгрузки страницы unload
Обработка через определение onbeforeunload на объекте window:
window.onbeforeunload = () => false
Маленькая шпаргалка для начинающих джаваскриптеров: как работать с объектами как с массивами
— Object.keys(obj) → массив ключей
— Object.values(obj) → массив значений
— Object.entries(obj) → массив пар [ключ, значение]
— Object.fromEntries(arr) → из пар обратно в объект
Ищем новичков во фронтенд-разработке и вёрстке сайтов.
Хотим показать, как получить реальный опыт в разработке сайтов и веб-приложений.
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
Чтобы в итоге ты своими руками разработал качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме уже завтра с поддержкой от опытных кураторов на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
react-google-maps
Библиотека, которая позволяет легко встраивать Google Maps в ваши React-приложения, используя компоненты и хуки
Чтобы начать, достаточно установить пакет:
npm install @vis.gl/react-google-maps
APIProvider, передаём свой API-ключ, и можно творить магию с картами.import { AdvancedMarker, APIProvider, Map } from '@vis.gl/react-google-maps';
function App() {
const position = { lat: 53.54992, lng: 10.00678 };
return (
<APIProvider apiKey={'ВАШ_API_КЛЮЧ'}>
<Map defaultCenter={position} defaultZoom={10} mapId="DEMO_MAP_ID">
<AdvancedMarker position={position} />
</Map>
</APIProvider>
);
}
export default App;useMapsLibrary() для подгрузки дополнительных библиотек, если нужно что-то посложнее, типа геокодинга или маршрутизации
Новые возможности CSS для плавной анимации входа и выхода
Если вы когда-либо работали с добавлением и удалением элементов из DOM, вы знаете, насколько сложно реализовать плавные переходы. Больше — нет
Относительное новое CSS свойство transition-behavior указывает, будут ли запускаться переходы для анимаций, поведение которых является дискретным
Значение transition-behavior может быть включено как часть сокращенного transition объявления:
transition: all 0.35s allow-discrete;
starting-style, которое определяет начальное состояние анимации при появлении элемента на странице. Подробнее про него рассказывал тут: пост
🔥 Ты хочешь пройти собеседование и не облажаться?
А может, ты уже middle, но на собесах сыпешься на простых вопросах?
Тогда добро пожаловать в канал, где:
⚔️ Я каждый день прохожу собеседования сам
🔍 Публикую реальные вопросы, которые задают прямо сейчас
🧠 Показываю, как на них правильно отвечать
📉 Разбираю типичные ошибки — свои и чужие
📈 Даю фреймы, шпаргалки и схемы, которые реально помогают пройти отбор
Я прошёл путь от джуна на jQuery до основателя команды из 12 разработчиков и собеседователя.
📍 Если ты хочешь устроиться в нормальную компанию,
📍 Если ты хочешь зарабатывать достойно,
📍 Если ты не хочешь тупить на собесе —
👇 Подписывайся прямо сейчас
/channel/itprizrak — Канал, где ты станешь сильнее
Интерактивная библиотека визуализации данных — ECharts
Позволяет добавлять интуитивно понятные, интерактивные и настраиваемые диаграммы в проект.
🔸Предоставляет более 20 типов диаграмм
🔸Переключение между рендерингом Canvas и SVG
🔸Автоматически генерируемые описания диаграмм
🔸Написана на чистом JavaScript
https://echarts.apache.org/en/index.html
➡️ @FrontendPortal | #resourse
Вот полезный совет по TypeScript:
Используйте шаблонные строковые литералы, чтобы убедиться, что ваши заголовки Authorization правильно отформатированы
➡️ @FrontendPortal | #tip by Matt Pocock
Все надоело и пропал интерес, чувствуешь себя амебой и хочется только залипать в телефоне. Бывает?
Психолог взрослого человека — канал для айтишников, у которых периодически опускаются руки и отключается мозг, ибо переработки и постоянная тревожность не приводят к другим исходам.
✔️ Как научиться отвлекаться от работы и отдыхать?
✔️ Как совместить кучу рабочих задач и время с семьей?
✔️ Как справиться с прокрастинацией?
✔️ Как не растерять запал, даже если начальник и коллеги 💩 и кажется, что ничего не выходит?
Подписывайтесь на канал @vadimpetrovpsi и научитесь работать без упахивания, выгорания и ущерба для личной жизни!
👨🏻💻 Псс. Заходите в закреп — там много полезного, и даже бесплатный мини-курс по выходу из апатии: /channel/+IcB0wvLIB2YxYjI6
В копилку лайфхаков по VSCode: теперь в терминале можно включить автодополнение а-ля IntelliSense
Как включить:
• Открываешь Settings → ищешь "terminal integrated suggest"
• Врубаешь чекбокс
Пользуемся 😇
➡️ @FrontendPortal | #vscode
Несколько мелких трюков, чтобы добавить сайту щепотку магии
➡️ @FrontendPortal | #CSS
Годное расширение для Chrome
Оно позволяет мгновенно протестировать более 1500 шрифтов Google прямо в браузере на любом тексте.
Забираем здесь
➡️ @FrontendPortal | #resourse
Мы неправильно используем CSS и отступы для абзацев
Не нужно использовать ни em, ни rem, ни px, и тем более %.
Лучше и проще использовать lh.
Это эквивалент высоты строки, значения свойства line-height.
Браузерная поддержка — 94%
Если тебе нужно поддерживать старые браузеры — добавь fallback:
p {
padding: 1em; /* fallback для динозавров */
padding: 1lh;
}lh влияет на внешние отступы у абзацев, в этой демке
Пополняем вашу копилку полезных ресурсов новыми сайтами
• Animated CSS Background — генератор анимированных фонов на чистом CSS
• Transition.style — готовые переходы, копируются в один клик
• Fancy Border Radius — создавайте нестандартные формы с border-radius
• CSS Filters Generator — фильтры в стиле Instagram для ваших изображений
• SpinKit — простые CSS спиннеры
Сохраняем ☕️
➡️ @FrontendPortal | #resourse
Если тебе когда-либо приходилось реализовывать тултипы с нуля — уф — ты знаешь, насколько это может быть мучительно.
Недавно CSS сильно упростил эту задачу, а теперь… это появляется и в Tailwind CSS.
Anchors для Tailwind CSS — полноценная поддержка спецификации CSS Anchor Positioning с удобным синтаксисом.
Подробнее: https://github.com/toolwind/anchors
Про Anchor Positioning API рассказывали здесь
➡️ @FrontendPortal
Стань частью масштабного ИТ-события от МТС
True Tech Day 2025 — третья технологическая конференция МТС для профессионалов ИТ‑индустрии. Одна из главных тем в этом году — тренды и практики искусственного интеллекта.
В программе:
— Доклады от ученых и зарубежных спикеров с индексом Хирша более 50.
— Кейсы применения современных ИИ‑решений — от AI‑агентов, тестов LLM и бенчмарков до вопросов регулирования.
— AI-интерактивы и технологические квесты.
— Пространство для нетворкинга,
…а еще after-party со звездным лайн-апом.
Когда: 6 июня
Где: Москва, МТС Live Холл и онлайн
Участие бесплатно. Регистрируйся по ссылке.
Полезный совет по DevTools для доступности
Хром умеет эмулировать дальтонизм и размытие зрения. Быстрый способ проверить, насколько ваш UI дружелюбен к тем, кто видит мир иначе
DevTools → Rendering → Emulate vision deficiencies
➡️ @FrontendPortal | #tip