Используй продвинутые типы 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
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
Лучшие практики обновления 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
Оптимизируйте архитектуру и читаемость своего кода, придерживаясь следующих рекомендаций:
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.
Совет дня:
В 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
Операционная система Linux лежит в основе большинства серверов по всему миру.
Так что это мощный инструмент, который стоит изучить. Этот курс поможет тебе освоить основы Linux.
Ты научишься управлять различными типами систем и устранять неполадки, а также закрепишь знания на практике в лабораторных заданиях.
https://freecodecamp.org/news/free-linux-crash-course-with-labs/
👉 Гайды по JavaScript | дать буст
Так что это мощный инструмент, который стоит изучить. Этот курс поможет тебе освоить основы Linux.
Ты научишься управлять различными типами систем и устранять неполадки, а также закрепишь знания на практике в лабораторных заданиях.
https://freecodecamp.org/news/free-linux-crash-course-with-labs/
Please open Telegram to view this post
VIEW IN TELEGRAM
Совет по JavaScript
Используй
👉 Гайды по JavaScript | дать буст
Используй
String.raw с шаблонными литералами, чтобы выводить необработанные строки — экранирование при этом игнорируется.Please open Telegram to view this post
VIEW IN TELEGRAM
Знаешь, как Vue обновляет DOM?
Vue выполняет обновления DOM асинхронно. Когда ты меняешь реактивные данные, Vue не сразу трогает DOM.
Вместо этого:
1️⃣ Группирует несколько изменений данных в один апдейт
2️⃣ Кладёт эти апдейты в асинхронную очередь
3️⃣ Обрабатывает очередь на следующем «тике» event loop
Такое батчирование предотвращает лишние операции с DOM и повышает производительность.
👉 Гайды по JavaScript | дать буст
Vue выполняет обновления DOM асинхронно. Когда ты меняешь реактивные данные, Vue не сразу трогает DOM.
Вместо этого:
Такое батчирование предотвращает лишние операции с DOM и повышает производительность.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Please open Telegram to view this post
VIEW IN TELEGRAM
Options API vs Composition API
✅ Options API — отлично подходит для небольших проектов или команд, которым важна быстрая настройка и понятная, структурированная организация кода.
✅ Composition API — лучше всего работает в крупных и сложных приложениях, где критична модульность, переиспользуемая логика и масштабируемость в долгосрочной перспективе.
✅ Смешанное использование — можно спокойно совмещать оба подхода в одном проекте, особенно если ты в процессе миграции или добавляешь новые фичи, где гибкость Composition API будет в плюс.
А ты какой подход используешь в своих проектах?
👉 Гайды по JavaScript | дать буст
А ты какой подход используешь в своих проектах?
Please open Telegram to view this post
VIEW IN TELEGRAM
Cтранная штука во vuejs о которой стрёмно рассказывать
Я подгружаю ТОННЫ данных при первом запуске приложения. Я одержим тем, чтобы UI реагировал мгновенно, и предпочту загрузить 1000 записей на старте, чем заставлять пользователя ждать.
Для этого использую composable
👉 Гайды по JavaScript | дать буст
Я подгружаю ТОННЫ данных при первом запуске приложения. Я одержим тем, чтобы UI реагировал мгновенно, и предпочту загрузить 1000 записей на старте, чем заставлять пользователя ждать.
Для этого использую composable
useCachedDataPlease open Telegram to view this post
VIEW IN TELEGRAM
Реализация real-time функциональности во Vue
Взаимодействие в реальном времени становится всё более важным для веб-приложений. Это повышает вовлечённость пользователей и обеспечивает мгновенную обратную связь. Вот несколько подходов, которые стоит рассмотреть:
1️⃣ Обновления в реальном времени с Supabase
Используйте возможности Supabase для real-time синхронизации данных между всеми клиентами.
https://supabase.com/docs/guides/realtime
2️⃣ WebSocket и Server-Sent Events (SSE)
Эти технологии позволяют реализовать комментарии в реальном времени, уведомления и другие интерактивные компоненты.
👉 Гайды по JavaScript | дать буст
Взаимодействие в реальном времени становится всё более важным для веб-приложений. Это повышает вовлечённость пользователей и обеспечивает мгновенную обратную связь. Вот несколько подходов, которые стоит рассмотреть:
Используйте возможности Supabase для real-time синхронизации данных между всеми клиентами.
https://supabase.com/docs/guides/realtime
Эти технологии позволяют реализовать комментарии в реальном времени, уведомления и другие интерактивные компоненты.
Please open Telegram to view this post
VIEW IN TELEGRAM