27159
Присоединяйтесь к нашему каналу и погрузитесь в мир фронтенд-разработки Связь: @devmangx РКН: https://clck.ru/3Fs3wT
Мелочь, которая делает UX лучше 📈
➡️ @FrontendPortal
Deno, популярный JavaScript-рантайм, теперь позволяет превращать проекты на JavaScript и TypeScript в десктопные приложения для Windows, macOS и Linux.
Можно выбрать системный WebView или встроенный Chromium-бэкенд. Более того, из коробки поддерживаются фреймворки вроде Next.js и SvelteKit
https://docs.deno.com/runtime/desktop/
➡️ @FrontendPortal
Если вы уезжаете в отпуск в середине июля — есть риск пожалеть 😭
AvitoTech анонсировал АвитоТехно – IT-рейв для тех, кто устал от созвонов, тасок и корпоративного вайба.
В прошлый раз тусовка была онлайн, а теперь наконец-то офлайн: 17 июля, ДК «Кристалл».
По лайнапу всё бодро: THE DAWLESS, LAVBLAST, BÖRIS REDWÄLL, SALAMÉ, РЕСПЕКТ АГЕНТСТВО, BiiCLA, плюс диджей-сеты от разрабов AvitoTech, Ozon и Т-Банка.
Короче, выглядит как редкий случай, когда ивент от IT-компании звучит не как наказание 😎
Регистрируемся по ссылке
Astro – лучшее, что случалось с веб-разработкой за последнее время. А версия 7.0 только что вышла!
✓ Vite 8 с Rolldown
✓ Новый компилятор на Rust
✓ Сборка до 61% быстрее
✓ Улучшения для AI-агентов
pnpm create astro
URL.canParse() — теперь входит в Baseline Widely Available
Поддерживается во всех браузерах с декабря 2023 года – в большинстве случаев можно использовать без опасений.
Если вы вызываете isValidUrl() для большого количества строк, которые не являются URL, переход на URL.canParse() может заметно повысить производительность, так как позволяет избежать использования ошибок для управления потоком выполнения.
➡️ @FrontendPortal
🔥VPS + ISPmanager со скидкой до 100% на Waicore
Запускаете сайты на VPS? Сейчас самое время попробовать ISPmanager практически бесплатно.
➕ Наши акции:
— 100% скидка на первый месяц лицензии ISPmanager при заказе VPS из категории «Веб-хостинг»
— Скидка 60% на лицензии ISPmanager при отдельной покупке
Также доступны:
🛡 SSL-сертификаты
🛡 BitNinja для защиты серверов от атак, спама и вредоносного ПО.
Получаете готовый VPS с установленной панелью управления и можете сразу приступать к работе с сайтами, почтой, базами данных и другими сервисами.
⚡️Акция действует месяц.
Подробнее на сайте WAICORE.
Отличная JS-либа для слайдеров и каруселей, которая избавляет от необходимости собирать всё с нуля.
Хорошая, лёгкая альтернатива Swiper 👍
https://splidejs.com/
➡️ @FrontendPortal | #resourse
Совет по JS: возможно, вы не знали про способ автоматически экранировать обратные слэши в строке
Используйте String.raw, она возвращает строку как есть, без обработки escape-последовательностей вроде \t, \n и т.д.
Она трактует \ и t как отдельные символы и автоматически экранирует обратный слэш в выходной строке.
➡️ @FrontendPortal | #tip by Shripal Soni
Есть повод отпраздновать!
facebook/react → react/react
➡️ @FrontendPortal
Бесплатное обучение по AI, Python, аналитике и IT-профессиям стало доступно россиянам 🇷🇺
Запущена госпрограмма, в рамках которой работающие граждане РФ (и те кто в поиске) теперь могут получить новую специальность или повысить квалификацию за счёт государства.
Программа реализуется совместно с Ростелеком.
Принес небольшую коллекцию красивых переходов 😳
Внутри готовые анимации для карточек, меню, уведомлений, загрузок, переключателей и других элементов интерфейса. Всё можно сразу посмотреть, скопировать и украсть себе в проект.
https://transitions.dev/
➡️ @FrontendPortal
Метод для возврата элемента массива по указанному индексу
Он действует почти как скобочная запись array[index], за исключением того, что индекс может быть отрицательным
➡️ @FrontendPortal | #js
Cloudflare купила компанию, стоящую за Vite!
Компанию создателя Vue — Эвана Ю.
Теперь Cloudflare также владеет проектами Vitest, Rolldown, Oxc... Ранее у них уже был Astro. Теперь ещё и Vite.
Это даёт Cloudflare контроль над всем стеком. У них теперь есть все примитивы: frontend/backend-фреймворк, линтинг, тестирование, форматирование, JS runtime, база данных, KV, инференс, blob storage, access и так далее.
Умный ход. Аккуратно упакованный набор, который можно скормить LLM, чтобы она собрала сайт ✌️
➡️ @FrontendPortal
Релизнулся Chrome 149! Наконец-то появилась возможность стилизовать gaps в CSS Grid и Flexbox.
Внешний вид календаря теперь тоже можно легко реализовать с помощью CSS Grid
➡️ @FrontendPortal
Во ВКонтакте серьезно обновили frontend-архитектуру
Речь про переход ключевых разделов vk.com на SPA: ленты, профилей, сообществ, мессенджера и других сценариев, то есть про реальный highload frontend.
Что получили:
→ первая отрисовка страницы ускорилась на 25%
→ переходы между разделами — в 3.5 раза быстрее
→ интерфейс сразу показывает каркас страницы, а затем догружает контент
Из интересного по инженерке:
→ деплой фронтенда сократился до 20 секунд
→ 6–8 релизов в сутки
→ 100+ merge request ежедневно попадает в прод
Переход делали постепенно и без изменения привычного интерфейса.
https://www.cnews.ru/news/line/2026-06-03_vkontakte_obnovila_veb-platformu
➡️ @FrontendPortal
Popover API
Удобный способ создавать всплывающие элементы. Новая возможность HTML. Имеет много встроенных фишек типа закрытия по клику на странице или по нажатию клавиши Esc.
Можно управлять как при помощи атрибутов HTML, так и через JS
Поддержка на данный момент составляет 88.2%
➡️ @FrontendPortal
Быстрый совет по CSS: Уменьшаем / скрываем скроллбары с помощью scrollbar-width
Cвойство позволяет изменить ширину полосы прокрутки. Принимает три значения: auto (дефолт), thin, none
На данный момент scrollbar-width поддерживается всеми браузерами - Can I Use
➡️ @FrontendPortal | #CSS #tip by Shripal Soni
Вышел Vite 8.1
- Экспериментальный Full Bundle Mode: примерно в 15 раз быстрее старт dev-сервера и до 10 раз быстрее полный reload на крупных приложениях.
- Chunk Import Map для сохранения стабильности чанков и улучшения кэширования.
- Интеграция WASM через ESM.
- Lightning CSS уверенно движется к статусу решения по умолчанию.
и многое другое!
Подробности в статье
https://vite.dev/blog/announcing-vite8-1
➡️ @FrontendPortal
🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг
25 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика.
Как это будет:
📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу
📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью
📂 В конце можно будет задать любой вопрос Виталию
Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы.
Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot
Реклама.
О рекламодателе.
Свойство scroll-padding
Позволяет остановить прокрутку на определённом расстоянии от края контейнера
Можно воспользоваться сокращённым свойством scroll-padding или альтернативными ему более конкретными свойствами scroll-padding-*
➡️ @FrontendPortal | #CSS
Очередная новинка в CSS на подходе — display: grid-lanes
Это решение для того самого Pinterest-лайаута: карточки разной высоты, которые плотно заполняют пространство без пустых дыр.
До сих пор подобные сетки обычно собирали через JavaScript и библиотеки вроде Masonry.js. Это добавляло лишние вычисления в рантайме, а при изменении размеров окна такие раскладки нередко начинали тормозить или ломаться.
Ребята из Apple подготовили отдельный сайт с примерами и подробным гайдом по grid-lanes:
https://gridlanes.webkit.org
Пока фича доступна только в Safari, но позже должна появиться и в других браузерах.
➡️ @FrontendPortal
Что, если «Следствие вели…» снимали бы в офисном сеттинге в IT-компании? Мы могли бы об этом только фантазировать, если бы… Авито взял и не снял свой выпуск с Леонидом Каневским 🔥
Мы ещё не успели посмотреть: планируем оставить на вечер. Говорят, легенда тру-крайма там расследует внезапный рост ошибок 404 на endpoint аватарок (реальный кейс команды AvitoTech, кстати!).
Смотрим, чтобы услышать будущие легендарные цитаты... ну и чтобы в вашей команде такого не случилось!
📱 YouTube
📱 Rutube
📱 VK Видео
Откопал интересную штуку для UI
Набор кастомизируемых pixel-grid спиннеров в стиле retro flip-dot дисплеев: можно выбрать готовый вариант, собрать свой в визуальном редакторе и экспортировать в SVG, React, Flutter и другие форматы
https://flicker.laurie.fyi/gallery
➡️ @FrontendPortal
React Compiler на Rust почти готов
Команда React практически завершила перенос React Compiler с TypeScript на Rust. Новая версия уже используется внутри компании и показывает очень уверенные результаты:
• 99,9% паритета с текущей реализацией на TypeScript
• около 25% прироста производительности
• более глубокая интеграция с экосистемой Rust-инструментов, включая SWC и OXC
Отдельно интересно, что часть портирования проходов компилятора выполнялась с помощью вайб-кодинга
Сейчас команда занимается финальной полировкой, тестированием и сбором обратной связи. По словам разработчиков, уровень уверенности в новой реализации уже достаточно высок, и PR планируют смержить в ближайшие недели
Параллельно экосистема уже готовится к переходу на новую версию. Для React Compiler на Rust появились черновые интеграционные PR для:
• Oxc
• SWC
• Bun
➡️ @FrontendPortal
Откопал мощный редактор с кучей красивых готовых mesh-градиентов, которые можно визуально кастомизировать и экспортировать как изображения или даже анимированные видео
https://colorflow.ls.graphics/
➡️ @FrontendPortal
🖥 Frontend с нуля до трудоустройства
Путь до Frontend-оффера — это не только обучение, но и собеседования, резюме и ATS-фильтры.
И у большинства кандидатов проблемы повторяются на одних и тех же этапах.
💼 Мы собрали материалы для каждого шага:
— ATS и разбор резюме
— база реальных Frontend собеседований
— задачи с собесов в BigTech
— System Design для Frontend
— инфраструктура больших приложений
— сообщество фронтендеров
— курсы по React, TypeScript и FSD
📍 В закрепе найдёшь материалы для каждого этапа пути до оффера.
Создать прикольную анимацию сайдбара на CSS не так уж сложно ☺️
Здесь мы делаем простую анимацию, чтобы скрывать и показывать сайдбар, одновременно сдвигая основной контент страницы вправо.
Если хочешь, можно сделать анимацию проще: убрать scale и оставить только translate.
Экспериментируй с разными значениями timing functions, длительностью и другими параметрами, чтобы добиться нужного эффекта
➡️ @FrontendPortal | #CSS
40 собесов и оффер за 1 месяц
Алексей разработчик.
Искал работу с декабря - написание сопроводов и отклики занимали очень много времени.
Выхлоп - почти нулевой.
В какой-то момент понял:
так можно искать бесконечно.
И по совету друга попробовал ии-ассистента Софи.
▫️За ~1 месяц прошел около 40 собеседований
▫️Получил оффер с вакансии, на которую, по его словам, не откликнулся бы сам
В описании она выглядела скучно, а по факту - одна из самых интересных компаний, с которыми я общался.
А ты знал, что в VS Code можно мгновенно выделить всё содержимое между парными скобками? 🤯
Просто дважды кликни внутри пары {} или (), и VS Code автоматически выделит весь код, который находится между ними.
Мелкая фишка, но при редактировании кода она может неожиданно сэкономить кучу времени ✌️
➡️ @FrontendPortal
Blossom — это опенсорс система каруселей с огромным количеством красивых паттернов и готовых примеров. Также в комплекте идут навыки для AI-агентов, а ещё есть поддержка React, Vue, Svelte и Web Components.
github.com/jespervos/blossom-carousel
➡️ @FrontendPortal