Чистый приём в JavaScript: деструктуризация с псевдонимами и значениями по умолчанию
👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Отображать пользовательские уведомления с Nuxt UI — проще простого благодаря
А ты уже пробовал?
👉 Гайды по JavaScript | дать буст
useToastА ты уже пробовал?
Please open Telegram to view this post
VIEW IN TELEGRAM
Вывод кортежей для структурированной логики в TypeScript
Посмотри, как работает пошаговый процесс на практике.
👉 Гайды по JavaScript | дать буст
Посмотри, как работает пошаговый процесс на практике.
Please open Telegram to view this post
VIEW IN TELEGRAM
Типичные сценарии использования
defineExpose особенно полезен, когда нужно открыть внутренние методы или состояние компонента для родительских компонентов — например, в случае сложных взаимодействий или при создании собственных UI-библиотек. Вот примеры:
✓ Доступ к состоянию компонента для тестирования: Иногда необходимо получить доступ к внутреннему состоянию компонента во время отладки или юнит-тестирования.
✓ Создание переиспользуемых компонентов: При разработке компонентной библиотеки можно сделать некоторые методы или свойства доступными для продвинутых сценариев использования.
✓ Интеграция со сторонними библиотеками: Иногда нужно передать внутренние данные компонента внешним JS-библиотекам, которые работают напрямую с экземпляром компонента.
👉 Гайды по JavaScript | дать буст
defineExpose в Vue: defineExpose особенно полезен, когда нужно открыть внутренние методы или состояние компонента для родительских компонентов — например, в случае сложных взаимодействий или при создании собственных UI-библиотек. Вот примеры:
✓ Доступ к состоянию компонента для тестирования: Иногда необходимо получить доступ к внутреннему состоянию компонента во время отладки или юнит-тестирования.
✓ Создание переиспользуемых компонентов: При разработке компонентной библиотеки можно сделать некоторые методы или свойства доступными для продвинутых сценариев использования.
✓ Интеграция со сторонними библиотеками: Иногда нужно передать внутренние данные компонента внешним JS-библиотекам, которые работают напрямую с экземпляром компонента.
Please open Telegram to view this post
VIEW IN TELEGRAM
Используй продвинутые типы TypeScript для создания чистых, композиционных и безопасных с точки зрения типов структур.
Посмотри, как работает связка template literal + exclude + extract в действии.
👉 Гайды по JavaScript | дать буст
Посмотри, как работает связка template literal + exclude + extract в действии.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Практические кейсы использования :root CSS-переменных с JavaScript и Vue.js
1. Переключение тем
Динамическое изменение CSS-переменных отлично подходит для переключения тем. Можно хранить несколько тем в виде наборов CSS-переменных и обновлять их в зависимости от предпочтений пользователя. Например, легко реализовать переключение между светлой и тёмной темами или дать более тонкий контроль — над размерами шрифта, цветовой схемой и т.д.
2. Адаптивные изменения в дизайне
CSS-переменные также удобно использовать в адаптивной вёрстке. Можно менять стили в зависимости от ширины экрана или ориентации устройства. Например, при изменении размеров окна можно программно обновлять значения переменных — чтобы подстроить отступы или размер шрифта под мобильные устройства.
В приведённом примере кода размер шрифта динамически адаптируется к ширине экрана, обеспечивая отзывчивый и удобный для пользователя интерфейс.
👉 Гайды по JavaScript | дать буст
1. Переключение тем
Динамическое изменение CSS-переменных отлично подходит для переключения тем. Можно хранить несколько тем в виде наборов CSS-переменных и обновлять их в зависимости от предпочтений пользователя. Например, легко реализовать переключение между светлой и тёмной темами или дать более тонкий контроль — над размерами шрифта, цветовой схемой и т.д.
2. Адаптивные изменения в дизайне
CSS-переменные также удобно использовать в адаптивной вёрстке. Можно менять стили в зависимости от ширины экрана или ориентации устройства. Например, при изменении размеров окна можно программно обновлять значения переменных — чтобы подстроить отступы или размер шрифта под мобильные устройства.
В приведённом примере кода размер шрифта динамически адаптируется к ширине экрана, обеспечивая отзывчивый и удобный для пользователя интерфейс.
Please open Telegram to view this post
VIEW IN TELEGRAM
Angular httpResource совет
✔️ Используй Value Guard при вызове
Это помогает безопасно обрабатывать возвращаемые данные и избежать ошибок, если значение отсутствует или не загружено.
👉 Гайды по JavaScript | дать буст
.value()Это помогает безопасно обрабатывать возвращаемые данные и избежать ошибок, если значение отсутствует или не загружено.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤2
Причина, почему твой React-код разваливается — это useEffect + setState.
Не синхронизируй локальное состояние внутри useEffect — это делает код излишне запутанным и трудным для понимания.
👉 Гайды по JavaScript | дать буст
Не синхронизируй локальное состояние внутри useEffect — это делает код излишне запутанным и трудным для понимания.
Please open Telegram to view this post
VIEW IN TELEGRAM
Совет по JavaScript
Используй
👉 Гайды по JavaScript | дать буст
Используй
document.hasFocus() чтобы проверить, активна ли текущая вкладка.Please open Telegram to view this post
VIEW IN TELEGRAM
👍2
Совет дня:
используй
👉 Гайды по JavaScript | дать буст
используй
as const, чтобы получать литеральные типы, а не расширенные. Отлично подходит для enum'ов и конфигурационных объектов.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Three.js — это JavaScript-библиотека, которая позволяет создавать 3D-графику прямо в браузере.
В этом курсе ты научишься работать с ней на практике, создавая реальные проекты.
Ты создашь рендерер, загрузишь и применишь текстуры, поработаешь с wireframe-геометриями и многим другим.
https://freecodecamp.org/news/learn-threejs-by-building-five-projects/
👉 Гайды по JavaScript | дать буст
В этом курсе ты научишься работать с ней на практике, создавая реальные проекты.
Ты создашь рендерер, загрузишь и применишь текстуры, поработаешь с wireframe-геометриями и многим другим.
https://freecodecamp.org/news/learn-threejs-by-building-five-projects/
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Лучшие практики обновления CSS-переменных :root с помощью JavaScript и Vue.js
1. Группировка обновлений
Если требуется обновить сразу несколько CSS-переменных, объединяйте их в одну операцию. Это снижает количество reflow в браузере и повышает производительность.
Изображение 1: пример с использованием Composition API и script setup. Обновление происходит через style.cssText, что позволяет применить несколько изменений за один проход.
2. Дебаунсинг обновлений
При обновлении CSS-переменных в ответ на частые события (например, resize) следует использовать debounce, чтобы избежать избыточных операций.
Изображение 2: вместо самописного debounce-функционала используется useDebounceFn из VueUse, что упрощает реализацию и повышает читаемость.
3. Ограничение области применения
По возможности ограничивайте область действия CSS-переменных конкретными компонентами, а не глобальным пространством. Это делает изменения более управляемыми и улучшает поддержку кода.
Иногда можно вовсе обойтись без явного объявления CSS-переменных.
Изображение 3: здесь используется реактивная переменная themeColor и директива v-bind() для привязки её значения к CSS-свойству напрямую.
👉 Гайды по JavaScript | дать буст
1. Группировка обновлений
Если требуется обновить сразу несколько CSS-переменных, объединяйте их в одну операцию. Это снижает количество reflow в браузере и повышает производительность.
Изображение 1: пример с использованием Composition API и script setup. Обновление происходит через style.cssText, что позволяет применить несколько изменений за один проход.
2. Дебаунсинг обновлений
При обновлении CSS-переменных в ответ на частые события (например, resize) следует использовать debounce, чтобы избежать избыточных операций.
Изображение 2: вместо самописного debounce-функционала используется useDebounceFn из VueUse, что упрощает реализацию и повышает читаемость.
3. Ограничение области применения
По возможности ограничивайте область действия CSS-переменных конкретными компонентами, а не глобальным пространством. Это делает изменения более управляемыми и улучшает поддержку кода.
Иногда можно вовсе обойтись без явного объявления CSS-переменных.
Изображение 3: здесь используется реактивная переменная themeColor и директива v-bind() для привязки её значения к CSS-свойству напрямую.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Оптимизируйте архитектуру и читаемость своего кода, придерживаясь следующих рекомендаций:
1. Отдавайте предпочтение функциональным компонентам, а не классовым
2. Давайте компонентам осмысленные имена
3. Выносите вспомогательные функции за пределы компонента
4. Выносите повторяющуюся разметку в конфигурационные объекты
5. Следите за размером компонентов — чем меньше, тем проще сопровождать
6. Деструктурируйте props при получении
7. Контролируйте количество props — их не должно быть слишком много
8. Используйте объекты вместо примитивов в props, чтобы группировать связанные значения
9. Избегайте вложенных тернарных операторов — сложные условия выносите в переменные
10. Выносите отображение списков в отдельные компоненты
11. Используйте хуки вместо HOC и render props
12. Переиспользуйте и инкапсулируйте логику в кастомных хуках
13. Выносите части JSX в отдельные функции рендера
14. Используйте Error Boundaries для обработки ошибок в UI
15. Используйте Suspense для управления асинхронной загрузкой компонентов или данных
https://thetshaped.dev/p/15-react-component-principles-for-better-design
👉 Гайды по JavaScript | дать буст
1. Отдавайте предпочтение функциональным компонентам, а не классовым
2. Давайте компонентам осмысленные имена
3. Выносите вспомогательные функции за пределы компонента
4. Выносите повторяющуюся разметку в конфигурационные объекты
5. Следите за размером компонентов — чем меньше, тем проще сопровождать
6. Деструктурируйте props при получении
7. Контролируйте количество props — их не должно быть слишком много
8. Используйте объекты вместо примитивов в props, чтобы группировать связанные значения
9. Избегайте вложенных тернарных операторов — сложные условия выносите в переменные
10. Выносите отображение списков в отдельные компоненты
11. Используйте хуки вместо HOC и render props
12. Переиспользуйте и инкапсулируйте логику в кастомных хуках
13. Выносите части JSX в отдельные функции рендера
14. Используйте Error Boundaries для обработки ошибок в UI
15. Используйте Suspense для управления асинхронной загрузкой компонентов или данных
https://thetshaped.dev/p/15-react-component-principles-for-better-design
Please open Telegram to view this post
VIEW IN TELEGRAM
thetshaped.dev
15 React Component Principles & Best Practices for Better Software Architecture & Design
The conscious road to more scalable designs of React applications.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1
Совет дня:
В nuxt_js ты можешь указать, какие composables нужно удалить при tree shaking из клиентского или серверного бандла для повышения производительности.
Это настраивается в файле nuxt.config.ts в секции
👉 Гайды по JavaScript | дать буст
В nuxt_js ты можешь указать, какие composables нужно удалить при tree shaking из клиентского или серверного бандла для повышения производительности.
Это настраивается в файле nuxt.config.ts в секции
optimization.treeShake.composablesPlease open Telegram to view this post
VIEW IN TELEGRAM