This media is not supported in your browser
VIEW IN TELEGRAM
Опенсорс веб-вьювер для зумируемых изображений, реализованный на чистом JavaScript
Посмотреть, как он работает, и начать использовать можно здесь: https://openseadragon.github.io/
➡️ @FrontendPortal
Посмотреть, как он работает, и начать использовать можно здесь: https://openseadragon.github.io/
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥28❤9👍5🌚1
Где фронтенд-разработчику искать вакансии в зарубежных компаниях?
Ответ — в Dev & ML Connectable Jobs. Это канал с подборкой вакансий в международных стартапах с русскоязычными фаундерами и командами. Если хочется выйти на зарубежный рынок без сотен откликов в никуда — полезный источник.
Вот несколько актуальных вакансий от авторов канала:
— Senior Frontend Engineer (Growth team) в AppFollow
— Senior Frontend Developer (Nuxt 3 / Vue 3 / TypeScript) в Alao
— Frontend Lead Developer в Muse Group
— Frontend Developer в Emerging Travel Group
— Frontend Tech Lead (Design System) в Manychat
больше вакансий — в Dev Connectable Jobs 🙌
Ответ — в Dev & ML Connectable Jobs. Это канал с подборкой вакансий в международных стартапах с русскоязычными фаундерами и командами. Если хочется выйти на зарубежный рынок без сотен откликов в никуда — полезный источник.
Вот несколько актуальных вакансий от авторов канала:
— Senior Frontend Engineer (Growth team) в AppFollow
— Senior Frontend Developer (Nuxt 3 / Vue 3 / TypeScript) в Alao
— Frontend Lead Developer в Muse Group
— Frontend Developer в Emerging Travel Group
— Frontend Tech Lead (Design System) в Manychat
больше вакансий — в Dev Connectable Jobs 🙌
Telegram
Dev & ML Connectable Jobs
Вакансии от 300+ зарубежных компаний с русскоговорящими фаундерами или командами. Наши читатели уже получили офферы в JetBrains, 1inch, Neon и др💙
Разместить вакансию: https://www.connectablejobs.com/?utm_source=devcj
Q&A: @connectable_jobs_team
Разместить вакансию: https://www.connectablejobs.com/?utm_source=devcj
Q&A: @connectable_jobs_team
😁9❤6🤝4
Совет по веб-доступности: Лучший способ сделать ссылки только с иконками доступными для скринридеров
Иногда нужно создавать ссылки, содержащие только иконку. Например: ссылки для шеринга поста
Но такие ссылки недоступны для пользователей скринридеров
Чтобы это исправить, можно задать подпись в скрытом элементе и связать его с тегом
➡️ @FrontendPortal | #tip by Shripal Soni
Иногда нужно создавать ссылки, содержащие только иконку. Например: ссылки для шеринга поста
Но такие ссылки недоступны для пользователей скринридеров
Чтобы это исправить, можно задать подпись в скрытом элементе и связать его с тегом
<a> с помощью атрибутов aria-labelledby и id. Также установите aria-hidden="true" на SVG-иконку, чтобы скринридеры её пропускалиPlease open Telegram to view this post
VIEW IN TELEGRAM
❤22👍15🔥2
CodePen анонсировал CodePen 2.0
Популярная фронтенд-песочница получает крупное обновление. Сейчас версия находится в закрытой бете, доступ к которой можно запросить.
Новые возможности включают:
Похоже, что CodePen эволюционирует из простой песочницы в гораздо более мощную среду разработки✌️
http://codepen.io/beta
➡️ @FrontendPortal
Популярная фронтенд-песочница получает крупное обновление. Сейчас версия находится в закрытой бете, доступ к которой можно запросить.
Новые возможности включают:
→ Поддержку файлов и папок для более удобной структуры проекта
→ Build with Blocks — сборка интерфейсов из переиспользуемых UI-блоков
→ Беспроблемную настройку инструментов и фреймворков
→ Совместную работу в реальном времени с другими разработчиками
→ Omnibar для быстрого поиска чего угодно
→ Новые настройки приватности
Похоже, что CodePen эволюционирует из простой песочницы в гораздо более мощную среду разработки
http://codepen.io/beta
Please open Telegram to view this post
VIEW IN TELEGRAM
❤18👍14🔥3🥱1
This media is not supported in your browser
VIEW IN TELEGRAM
Интересный факт: когда речь идёт о возможности прерывания, CSS transitions и keyframe-анимации ведут себя по-разному
Transitions интерполируют значения к последнему актуальному состоянию и могут быть прерваны, тогда как keyframe-анимации выполняются по фиксированному таймлайну и после запуска не перенаправляются на новое состояние
➡️ @FrontendPortal
Transitions интерполируют значения к последнему актуальному состоянию и могут быть прерваны, тогда как keyframe-анимации выполняются по фиксированному таймлайну и после запуска не перенаправляются на новое состояние
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔43❤18👍8🔥3😁2
Если ты используешь эти JavaScript-библиотеки… Скорее всего, они тебе уже не нужны.
Лучше используй нативный API
➡️ @FrontendPortal
Лучше используй нативный API
Please open Telegram to view this post
VIEW IN TELEGRAM
❤45👍31🔥11😢5🤯3
This media is not supported in your browser
VIEW IN TELEGRAM
Я, сливающий все приватные данные своей компании в нейронку, просто чтобы отцентрировать div
➡️ @FrontendPortal
Please open Telegram to view this post
VIEW IN TELEGRAM
😁124🤣81❤14
Вышел Better Auth 1.5! Добавь аутентификацию на свой сайт за считанные минуты. Бесплатно и с открытым исходным кодом.
✓ React, Vue, Astro, Next.js, Nuxt…
✓ Логин через X, GitHub, Meta, Google, Discord и другие
➡️ @FrontendPortal
✓ React, Vue, Astro, Next.js, Nuxt…
✓ Логин через X, GitHub, Meta, Google, Discord и другие
$ pnpm install better-auth
Please open Telegram to view this post
VIEW IN TELEGRAM
❤36🔥10👍1
This media is not supported in your browser
VIEW IN TELEGRAM
У текста всегда странный лишний отступ: сверху над заглавными буквами и снизу под базовой линией. Фикс в одну строку CSS:
Идеально обрезает текстовый бокс по реальным границам глифов. Больше никаких костылей с паддингами.
➡️ @FrontendPortal
text-box: trim-both cap alphabetic;
Идеально обрезает текстовый бокс по реальным границам глифов. Больше никаких костылей с паддингами.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥111💯19👍11❤3🤯1
This media is not supported in your browser
VIEW IN TELEGRAM
Совет по CSS
Мы часто используем кнопки действий, появляющиеся при наведении, чтобы интерфейс выглядел чище.
Но пользователи с клавиатурой и на тачскринах не могут инициировать наведение, из-за чего такие кнопки становятся недоступными
Сделай доступным для клавиатуры: используй
Сделай доступным для тачскрина:
➡️ @FrontendPortal | #tip by Shripal Soni
Мы часто используем кнопки действий, появляющиеся при наведении, чтобы интерфейс выглядел чище.
Но пользователи с клавиатурой и на тачскринах не могут инициировать наведение, из-за чего такие кнопки становятся недоступными
Сделай доступным для клавиатуры: используй
:focus-within, чтобы показывать кнопки, когда фокус находится внутри контейнера.Сделай доступным для тачскрина:
hover: none сработает, если основное устройство ввода не поддерживает наведениеPlease open Telegram to view this post
VIEW IN TELEGRAM
🔥31❤16👍8🤝4
This media is not supported in your browser
VIEW IN TELEGRAM
PatternСraft — библиотека фонов с градиентами и геометрическими узорами
Каждый фон можно посмотреть в деле, а затем скопировать его CSS для своих проектов
patterncraft.fun
➡️ @FrontendPortal
Каждый фон можно посмотреть в деле, а затем скопировать его CSS для своих проектов
patterncraft.fun
Please open Telegram to view this post
VIEW IN TELEGRAM
👍40❤25🏆1
This media is not supported in your browser
VIEW IN TELEGRAM
transitionType проп для ссылок в Next.js 16.2(требует дополнительной настройки для <ViewTransitions />)
<ViewTransitions> всё ещё экспериментальная фича в Next.js и не рекомендуется для продакшена
Полная демка:
https://github.com/SidKH/gist-of-next-demos/blob/cursor/view-transition-transition-types-demo/README.md
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥25❤9
This media is not supported in your browser
VIEW IN TELEGRAM
Pinterest перешёл на нативные CSS-карусели, чтобы заменить устаревший JS по всей платформе → https://goo.gle/4cZR6Pk
Используя CSS-примитивы вроде
- сокращения кода на 90% (с ~2000 строк JS до ~200 строк CSS)
- ускорения загрузки страниц на 15%
- более плавного и интерактивного UI
➡️ @FrontendPortal
Используя CSS-примитивы вроде
scroll markers и scroll snap, они добились:- сокращения кода на 90% (с ~2000 строк JS до ~200 строк CSS)
- ускорения загрузки страниц на 15%
- более плавного и интерактивного UI
Please open Telegram to view this post
VIEW IN TELEGRAM
❤54👍28🔥18🤔2
This media is not supported in your browser
VIEW IN TELEGRAM
Cobe — это крошечная библиотека WebGL для отображения глобуса, которая позволяет рендерить красивую анимированную Землю на canvas практически без увеличения размера бандла.
→ ~5KB (gzip)
→ основана на WebGL
→ плавная анимация глобуса
→ настраиваемые маркеры и цвета
→ работает в любом JS-проекте
Идеально подходит для лендингов, где нужен глобус без подключения тяжёлых зависимостей✌️
GitHub тут
➡️ @FrontendPortal
→ ~5KB (gzip)
→ основана на WebGL
→ плавная анимация глобуса
→ настраиваемые маркеры и цвета
→ работает в любом JS-проекте
Идеально подходит для лендингов, где нужен глобус без подключения тяжёлых зависимостей
GitHub тут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍50❤13🔥8
This media is not supported in your browser
VIEW IN TELEGRAM
Если нужно быстро сгенерировать кастомный SVG-лоадер — вот отличная опенсорс-тулза. Гибкая настройка: цвет, скорость, размер и прочее по вкусу
Закидывайте в закладки — пригодится: http://loaders.holasvg.com
➡️ @FrontendPortal | #resourse
Закидывайте в закладки — пригодится: http://loaders.holasvg.com
Please open Telegram to view this post
VIEW IN TELEGRAM
❤26🔥14👍4🥱2
This media is not supported in your browser
VIEW IN TELEGRAM
CSS Совет
Одна строка для задания одновременно
Мы можем использовать
📝 Примечание: значения в функции
➡️ @FrontendPortal | #tip by Shripal Soni
Одна строка для задания одновременно
max-width и width в CSS Мы можем использовать
min() для задания как width, так и max-width.min() возвращает наименьшее значение из переданныхmin() можно указывать в любом порядке.Please open Telegram to view this post
VIEW IN TELEGRAM
🔥45❤8👍7
This media is not supported in your browser
VIEW IN TELEGRAM
Простой способ сделать градиентный текст в CSS
Свойство
Также мы используем свойство
➡️ @FrontendPortal | #CSS
Свойство
background-clip определяет, как фоновое изображение или цвет должны быть обрезаны относительно границ текста. В данном случае установлено значение text, что означает, что фон должен быть обрезан по контуру текста. Также мы используем свойство
-webkit-text-fill-color, чтобы сделать цвет текста прозрачнымh1 {
background-image: linear-gradient(109.6deg, rgba(228, 107, 232, 1) 11.2%, rgba(87, 27, 226, 1) 96.7%);
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}Please open Telegram to view this post
VIEW IN TELEGRAM
❤47👍18🏆2
Forwarded from IT Portal
Наконец-то веб снова становится интересным: разраб придумал гениальный способ, как сделать обтекаемый текст в браузере — прямо как в глянцевых журналах
Он прошёл через все круги ада, чтобы принести вам на ближайшие годы одну из самых важных фундаментальных составляющих UI-инженерии (если не в плане реализации, то как минимум на уровне концепции)
Быстрый, точный и полноценный алгоритм измерения текста на стороне приложения, написанный на чистом TypeScript, который можно использовать для верстки целых веб-страниц без CSS, обходя измерения через DOM и reflow.
GitHub здесь🍆
@IT_Portal
Он прошёл через все круги ада, чтобы принести вам на ближайшие годы одну из самых важных фундаментальных составляющих UI-инженерии (если не в плане реализации, то как минимум на уровне концепции)
Быстрый, точный и полноценный алгоритм измерения текста на стороне приложения, написанный на чистом TypeScript, который можно использовать для верстки целых веб-страниц без CSS, обходя измерения через DOM и reflow.
GitHub здесь
@IT_Portal
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤47👍23🔥8🏆7😁3🤯3
Сегодня я узнал, что можно безопасно выравнивать элементы внутри контейнера 👇
Это предотвращает ситуацию, когда контент выходит за пределы экрана и пользователь не может до него проскроллить.
Вот наглядная демо-визуализация, показывающая, как работает ключевое слово
Хорошо видно, что
Попробовать можно здесь: https://iprodan.dev/l/safe-alignment/
➡️ @FrontendPortal | #CSS
Это предотвращает ситуацию, когда контент выходит за пределы экрана и пользователь не может до него проскроллить.
Вот наглядная демо-визуализация, показывающая, как работает ключевое слово
safeХорошо видно, что
safe не даёт элементам скрываться, а unsafe (поведение по умолчанию), наоборот, прячет их и делает недоступными.Попробовать можно здесь: https://iprodan.dev/l/safe-alignment/
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥40👍24❤8🏆2