Примеры утечек памяти в JavaScript
Разбираем несколько причин утечек памяти и способы их устранения.
https://www.youtube.com/watch?v=HJSnq0z_cOE
Разбираем несколько причин утечек памяти и способы их устранения.
https://www.youtube.com/watch?v=HJSnq0z_cOE
👍12⚡5❤1💩1👌1
Введение в Nginx
Знакомство с базовыми концепциями одного из самых популярных серверов.
https://www.netguru.com/blog/nginx-tutorial-basics-concepts
Знакомство с базовыми концепциями одного из самых популярных серверов.
https://www.netguru.com/blog/nginx-tutorial-basics-concepts
🔥8👍3❤2💩2
6 полезных CSS сниппетов
▫️использование контейнерных запросов;
▫️создание прокрутки с привязкой;
▫️избегание position: absolute с помощью CSS Grid;
▫️быстрое создание круга;
▫️использование каскадных слоев;
▫️применение логических свойств для упрощения кода.
https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023
▫️использование контейнерных запросов;
▫️создание прокрутки с привязкой;
▫️избегание position: absolute с помощью CSS Grid;
▫️быстрое создание круга;
▫️использование каскадных слоев;
▫️применение логических свойств для упрощения кода.
https://web.dev/articles/6-css-snippets-every-front-end-developer-should-know-in-2023
❤10🔥3👍2👎1
CSS text-box-trim
О том, как работает свойство для обрезки лишнего пространства у текста, и для каких случаев его удобно применять.
https://developer.chrome.com/blog/css-text-box-trim?hl=ru
О том, как работает свойство для обрезки лишнего пространства у текста, и для каких случаев его удобно применять.
https://developer.chrome.com/blog/css-text-box-trim?hl=ru
🔥13❤2👍2
Очередной кейс использования container queries и селектора :has()
Ахмад Шадид рассказывает и показывает, как создавал функционал заглавной картинки для своего блога.
https://ishadeed.com/article/modern-css-feature-image/
Ахмад Шадид рассказывает и показывает, как создавал функционал заглавной картинки для своего блога.
https://ishadeed.com/article/modern-css-feature-image/
👍11❤2🔥2
Избавляемся от any в проектах на TS
any отключает многие проверки типов и снижает безопасность кода. Заметка о том, какие правила линтинга использовать, чтобы сделать ваш код более надежным.
https://typescript-eslint.io/blog/avoiding-anys/
any отключает многие проверки типов и снижает безопасность кода. Заметка о том, какие правила линтинга использовать, чтобы сделать ваш код более надежным.
https://typescript-eslint.io/blog/avoiding-anys/
👍11🥱5❤1🔥1🤓1
Перемещение элементов в DOM при помощи moveBefore
moveBefore позволяет перемещать элементы без первоначального удаления их из DOM, что добавляет удобства, т.к. в случае iframe - нет перезагрузки содержимого, активные элементы остаются в фокусе и т.д. Более подробно - по ссылке.
https://www.bram.us/2025/01/16/move-elements-around-the-dom-while-preserving-their-state-with-movebefore/
moveBefore позволяет перемещать элементы без первоначального удаления их из DOM, что добавляет удобства, т.к. в случае iframe - нет перезагрузки содержимого, активные элементы остаются в фокусе и т.д. Более подробно - по ссылке.
https://www.bram.us/2025/01/16/move-elements-around-the-dom-while-preserving-their-state-with-movebefore/
👍11🔥3👎2🤔2⚡1
Экспериментальный React Transition API
С первого релиза до настоящего времени у React не было своего API для анимации, и приходилось использовать библиотеки (например, Motion for React или React Spring). Наконец разрабочики решили залатать эту дыру. Теперь можно попробовать ViewTransition. Подробнее — в статье.
https://motion.dev/blog/reacts-experimental-view-transition-api
С первого релиза до настоящего времени у React не было своего API для анимации, и приходилось использовать библиотеки (например, Motion for React или React Spring). Наконец разрабочики решили залатать эту дыру. Теперь можно попробовать ViewTransition. Подробнее — в статье.
https://motion.dev/blog/reacts-experimental-view-transition-api
🔥12👍4⚡3❤1
Инструменты для проверки доступности
Обзорная статья о том, почему доступность - один из важных аспектов разработки, и какие инструменты можно использовать для тестирования.
https://techhub.iodigital.com/articles/accessibility-tools
Обзорная статья о том, почему доступность - один из важных аспектов разработки, и какие инструменты можно использовать для тестирования.
https://techhub.iodigital.com/articles/accessibility-tools
❤9👍3🔥2
Погружение в React Server Components
Рассмотрим, чем RSC отличается от классических CSR и SSR, какие у них преимущества и как интегрировать серверные компоненты в свое приложение на React.
https://tonyalicea.dev/blog/understanding-react-server-components/
Рассмотрим, чем RSC отличается от классических CSR и SSR, какие у них преимущества и как интегрировать серверные компоненты в свое приложение на React.
https://tonyalicea.dev/blog/understanding-react-server-components/
🔥11⚡1❤1
10 backend понятий, о которых желательно знать frontend разработчику
Чтобы быть в теме и понимать, о чем говорят бекендеры на стендапах, вот небольшая обзорная статья, рассказывающая о таких понятиях как шардинг, балансировщик, API Gateway и еще некоторых других.
https://dev.to/thesanjeevsharma/10-backend-terms-every-frontend-developer-should-know-2o2h
Чтобы быть в теме и понимать, о чем говорят бекендеры на стендапах, вот небольшая обзорная статья, рассказывающая о таких понятиях как шардинг, балансировщик, API Gateway и еще некоторых других.
https://dev.to/thesanjeevsharma/10-backend-terms-every-frontend-developer-should-know-2o2h
❤14👍5🤔2👌2🤣1
Настраиваем SSR с React Router 7
Использование React Router в качестве фреймворка на примере создания приложения книжного трекера.
https://blog.logrocket.com/server-side-rendering-react-router-v7/
Использование React Router в качестве фреймворка на примере создания приложения книжного трекера.
https://blog.logrocket.com/server-side-rendering-react-router-v7/
👍12👎3🔥2👌1🌚1
Относительно новые вещи, которые будут доступны в HTML в 2025
Группировка details как аккордион, стилизация селектов, чекбоксы как toggle и еще несколько фич.
https://frontendmasters.com/blog/bone-up-html-2025/
Группировка details как аккордион, стилизация селектов, чекбоксы как toggle и еще несколько фич.
https://frontendmasters.com/blog/bone-up-html-2025/
🎉42🔥5❤3😁2
Кортежи в TS
Большой сборник примеров работы с кортежами.
https://2ality.com/2025/01/typescript-tuples.html
Большой сборник примеров работы с кортежами.
https://2ality.com/2025/01/typescript-tuples.html
👍13⚡1🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Nim - темплейт для персонального сайта с использованием Motion-Primitives
Nim создан с помощью Next.js, React, Tailwind CSS и Motion-Primitives. В статье — основные функции, особенности и способы использования этого шаблона для создания современных веб-приложений.
https://tympanus.net/codrops/2025/02/01/nim-nextjs-react-tailwind-motion-template/
Nim создан с помощью Next.js, React, Tailwind CSS и Motion-Primitives. В статье — основные функции, особенности и способы использования этого шаблона для создания современных веб-приложений.
https://tympanus.net/codrops/2025/02/01/nim-nextjs-react-tailwind-motion-template/
👍11🔥3👌1🥴1
Как применять CSS3-трансформации для работы с фоновыми изображениями
В статье объясняется, как применять свойства transform для масштабирования, поворота и других изменений фоновых изображений, а также рассматриваются ограничения и возможные обходные пути.
https://www.sitepoint.com/css3-transform-background-image/?utm_source=rss
В статье объясняется, как применять свойства transform для масштабирования, поворота и других изменений фоновых изображений, а также рассматриваются ограничения и возможные обходные пути.
https://www.sitepoint.com/css3-transform-background-image/?utm_source=rss
👍9👌1👨💻1
JavaScript Temporal приближается
В скором времени в браузерах появится экспериментальная поддержка JavaScript Temporal API, который позволит упростить работу со временем в нативном JS.
https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/
В скором времени в браузерах появится экспериментальная поддержка JavaScript Temporal API, который позволит упростить работу со временем в нативном JS.
https://developer.mozilla.org/en-US/blog/javascript-temporal-is-coming/
🔥20👍3❤2🤔2⚡1
Веб-стандарты — Выпуск 459
Lightpanda Browser, CSS sheet, мощный attr, Temporal приходит в JS, Bun 1.2
https://web-standards.ru/podcast/459/
Lightpanda Browser, CSS sheet, мощный attr, Temporal приходит в JS, Bun 1.2
https://web-standards.ru/podcast/459/
❤8👍4⚡1
Cоздатем реалистичную пушистую траву с использованием Three.js
Техники работы с геометрией, шейдерами и анимацией для достижения эффекта объемной и динамичной травы, не убивая перфоманс.
Демо | Github
https://tympanus.net/codrops/2025/02/04/how-to-make-the-fluffiest-grass-with-three-js/
Техники работы с геометрией, шейдерами и анимацией для достижения эффекта объемной и динамичной травы, не убивая перфоманс.
Демо | Github
https://tympanus.net/codrops/2025/02/04/how-to-make-the-fluffiest-grass-with-three-js/
🔥17🥰2👍1
Плавные переходы для top-level элементов с использованием свойства display
Используем новые возможности CSS для управления элементами в верхнем слое. Автор объясняет, как можно плавно анимировать переходы с помощью
https://smashingmagazine.com/2025/01/transitioning-top-layer-entries-display-property-css/
Используем новые возможности CSS для управления элементами в верхнем слое. Автор объясняет, как можно плавно анимировать переходы с помощью
@starting-style и transition-behavior
.https://smashingmagazine.com/2025/01/transitioning-top-layer-entries-display-property-css/
👍10❤2🔥1
Деплоим Next.js приложение с Deno Deploy
Небольшой туториал о том, как разворачивать приложения Next.js с использованием Deno Deploy: преимущества и шаги для интеграции этих технологий.
https://blog.logrocket.com/deploying-next-js-apps-with-deno-deploy/
Небольшой туториал о том, как разворачивать приложения Next.js с использованием Deno Deploy: преимущества и шаги для интеграции этих технологий.
https://blog.logrocket.com/deploying-next-js-apps-with-deno-deploy/
👍8😁3⚡1