FrontEndDev
28.7K subscribers
2.23K photos
22 videos
7.43K links
🚀 Статьи, новости, туториалы по frontend разработке.

https://jem-space.ru

Admin: @jem_jem
Пишу в @five_a_m

Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee

Реклама: https://bit.ly/2NxmVDu
РКН: https://clck.ru/3GLw7G
Download Telegram
2 CSS свойства, позволяющие обрезать лишнее пространство box-контейнера

Экспериментальные свойства text-box-trim и text-box-edge, позволяющие тонко настраивать размеры текстовых контейнеров.

https://css-tricks.com/two-css-properties-for-trimming-text-box-whitespace/#aa-now-where-do-you-want-to-trim-from
👍13🔥3🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll-based анимация текста с помощью SVG фильтров

Очередной необычный эффект для анимации текстового контента.

Демо | GitHub

https://tympanus.net/codrops/2024/08/22/scroll-based-svg-filter-animations-on-text/
🔥173👍3❤‍🔥1
Хочешь щёлкать задачи по фронтенду как орешки?

Канал Frontend tests & tasks научит!

Это не очередной канал с задачами. Здесь придется думать.

Убедись сам 👉 @Frontend_tasks
👍8😁3🤡21🔥1
Улучшаем рендеринг перфоманс с CSS content-visibility

На примере сайта с большим количеством emoji посмотрим как content-visibility влияет на отрисовку страницы.

https://nolanlawson.com/2024/09/18/improving-rendering-performance-with-css-content-visibility/
🔥95👍2
Math4Devs

Список математических символов с их эквивалетном в JS: от простых до сложных.

https://math4devs.com/
👍164
Управляем React компонентом с помощью url

Как синхронизировать состояние компонента с url параметрами: пошаговое и интерактивное руководство.

https://buildui.com/posts/how-to-control-a-react-component-with-the-url
👍9🔥42
Новые значения и функции CSS

Обновленные старые и новые фичи, которые могут заехать в релиз в ближайшем будущем.

https://alvaromontoro.com/blog/68062/new-values-and-functions-in-CSS
👍18🔥4👀3👎1
CSS Converter

VS Code расширение для конвертации HTML/CSS в JS/CSS для styled components и обратно.

https://marketplace.visualstudio.com/items?itemName=Lakkannawalikar.css-converter
👍16🤡6🔥1
SVG Coding Examples: Рецепты ручного создания SVG

Разбираемся с внутрянкой работы SVG на примере простых фигур и операций.

https://www.smashingmagazine.com/2024/09/svg-coding-examples-recipes-writing-vectors-by-hand/
👍11🔥4
Используем Axios с Proxy

Примеры глобальной конфигурации axios, а также конфигурации одиночных запросов с использованием proxy.

https://brightdata.com/blog/how-tos/axios-proxy
👍11🤔42
ColorSpace

Простой и удобный генератор CSS градиентов.

https://mycolor.space/gradient3
🔥15👍51
5 способов ленивой подгрузки изображений

Улучшаем быстродействие и UX с помощью ленивой загрузки, используя нативные возможности браузера или библиотечные функции.

https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/
👍8🔥3🤔1
Создаем фигуры с вырезами, используя CSS маски

Простые примеры использования CSS Mask для создания фигур.

https://verpex.com/blog/website-tips/how-to-create-shapes-with-inner-curves-using-css-mask
9🔥2👍1
🚀 Dockhost - современный хостинг для разработчиков приложений, ботов, mini apps и баз данных!

Облачная PaaS платформа на основе Docker-контейнеров, которая упрощает запуск и масштабирование приложений. Отлично подходит для разработчиков, владельцев пет проектов, фрилансеров, которые хотят быстро и просто запустить свой продукт, не задумываясь о настройке инфраструктуры.

👨‍💻Бонусом на платформе удобный интерфейс для управления контейнерами, высокий уровень безопасности и оплата по факту потребления, без фиксированных тарифов.

Помимо запуска готового образа Docker-контейнера из любого реестра, вы можете легко подключить к своему проекту в Dockhost любой репозиторий Git (GitHub, GitLub, и другие) с вашим кодом и настроить авто-деплой через Push (Push-to-Deploy).

👉 Перейти в Dockhost
🔥6👍2👎2🥴2
Переходы открытия и закрытия для <details>

Интересный и простой способ оживить нативный <details> c помощью interpolate-size и transition.

https://nerdy.dev/open-and-close-transitions-for-the-details-element
🔥102👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll-to-select

Создание необычного для веба контрола, позволяющего выбирать значение при помощи скролла к нужному элементу.

https://css-tricks.com/how-to-make-a-scroll-to-select-form-control/
🔥14👍7👎62
Управление сессией в NextJS

Полное руководство с примерами кода по работе с сессиями без использования сторонник библиотек.

https://clerk.com/blog/complete-guide-session-management-nextjs
👍821👎1
Angular Routing

Все, что нужно знать о роутинге в Angular в одной статье

https://monsterlessons-academy.com/posts/angular-routing-essentials-all-you-need-to-know-in-one-post
9👍2🔥1
ESLint теперь поддерживает линтинг JSON

Поддержка новых правил с помощью плагинов eslint/json и eslint/markdown для проверки JSON и Markdown файлов

https://eslint.org/blog/2024/10/eslint-json-markdown-support/
👍28🔥72
Сборщики: прошлое, настоящее и будущее

Исторический экскурс на тему бандлеров: почему приходится их использовать, как они работают под капотом, какие проблемы решают и как будут развиваться дальше.

https://www.youtube.com/watch?v=JUS6EPMbk0U
👍171