Совет по JavaScript

Более простой и понятный способ форматировать длительности с помощью Intl.DurationFormat

👉 Гайды по JavaScript | дать буст

Это инструмент, о котором топ-1% JavaScript-разработчиков не хотят, чтобы ты знал 👀

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

Жаль, что у меня этого не было, когда я только начинал учить JavaScript… это реально даёт более глубокое понимание того, что происходит «под капотом» :)

Источник : jsviz.klve.nl

👉 Гайды по JavaScript | дать буст

Манипулирование массивами

👉 Гайды по JavaScript | дать буст

Библиотека JavaScript для загрузки файлов на сайт

Называется Uppy, она модульная и с открытым исходным кодом.

✓ Поддерживает drag & drop, загрузку с веб-камеры или по URL
✓ Умеет загружать файлы из Dropbox, Google Drive и других сервисов
✓ Есть интеграции для React, Vue, Angular и Svelte

👉 Гайды по JavaScript | дать буст

В следующей версии Bun

В JavaScript появится нативная поддержка YAML

Можно будет импортировать, бандлить, подключать через require и парсить YAML так же просто, как JSON.

Ban:

Чтобы это реализовать, мы написали парсер YAML на Zig. Он проходит 90% тестов совместимости YAML 1.2, и мы продолжаем работать над тем, чтобы этот показатель рос.

👉 Гайды по JavaScript | дать буст

Иногда в проектах нужно сортировать данные по дате.

В JavaScript есть разные способы сделать это — одни работают быстрее, другие медленнее.

В этом гайде BrandonWoz разбирает медленный способ (преобразование строк с датами в объекты Date прямо внутри функции сортировки) и показывает более быстрый вариант.

https://freecodecamp.org/news/how-to-sort-dates-efficiently-in-javascript/

👉 Гайды по JavaScript | дать буст

Intl API + TypeScript = аккуратное форматирование нескольких валют

Смотри

👉 Гайды по JavaScript | дать буст

Совет дня

В Nuxt композиция useLoadingIndicator используется компонентом <NuxtLoadingIndicator>.

Её можно запускать вручную и в плагинах через хуки:

- page:loading:start
- page:loading:end

👉 Гайды по JavaScript | дать буст

Bun v1.2.21

- Адаптеры для MySQL/MariaDB и SQLite в Bun.SQL
- Нативная поддержка YAML — bundle, import, require .yaml
- Bun.secret: безопасное хранение секретов для CLI
- postMessage(string) стал в 500 раз быстрее
- Поддержка compile в Bun.build API
- API для сканера безопасности

https://bun.com/blog/bun-v1.2.21

👉 Гайды по JavaScript | дать буст

Когда вы учитесь писать код на JavaScript, вы, скорее всего, будете использовать функции для многих вещей.

Функции — это мощный инструмент, но они не решают все задачи.

В этом справочнике Spruce Khalifa рассказывает про объектно-ориентированное программирование в JS и разбирает объекты, прототипы, классы и многое другое.

https://www.freecodecamp.org/news/how-to-use-classes-in-javascript-handbook/

👉 Гайды по JavaScript | дать буст

5 способов определения функции в JavaScript

👉 Гайды по JavaScript | дать буст

Топ-8 архитектурных стилей API

👉 Гайды по JavaScript | дать буст

На этой неделе я плотнее поработал с Tanstack DB и наконец-то понял, как оно устроено. Много мелких «ага»-моментов.

В обычном React приходится фетчить данные с REST, класть их в state, чтобы можно было менять в форме, подтягивать через useEffect, кешировать в Tanstack Query через query key и держать отдельные переменные для derived state.

В Tanstack DB всё это закрывается через live query. Причём derived state можно вычислять прямо внутри самого запроса. И при этом не нужны useState, useEffect, отдельные переменные, query keys и кастомные хуки. Достаточно сделать запрос к коллекции на type-safe языке.

👉 Гайды по JavaScript | дать буст

10 способов лучше организовать и спроектировать React-приложение:
↳ https://thetshaped.dev/p/10-ways-organize-and-design-react-application

Указывайте свои зависимости в package.json, чтобы повысить безопасность проекта:
↳ https://thetshaped.dev/p/pin-your-dependencies-in-packagejson

Библиотеки управления состояниями и получения данных в React:
↳ https://thetshaped.dev/p/state-management-and-data-fetching-libraries

Ментальные модели компонентов React:
↳ https://thetshaped.dev/p/react-component-mental-models

Дилемма стилизации в React:
↳ https://thetshaped.dev/p/the-styling-dilemma-in-react

15 принципов и лучших практик React Component для улучшения архитектуры и дизайна программного обеспечения:
↳ https://thetshaped.dev/p/15-react-component-principles-for-better-design

Как использовать Reducer в React для лучшего управления состояниями: 2 эффективных способа упростить дизайн и архитектуру:
↳ https://thetshaped.dev/p/how-to-use-reducer-in-react-for-better-and-simpler-state-management

7 практических советов по оптимизации производительности в приложениях React:
↳ https://thetshaped.dev/p/7-practical-tips-on-performance-optimizations-in-react-applications

9 лучших практик React-тестирования для улучшения дизайна и качества ваших тестов:
↳ https://thetshaped.dev/p/9-react-testing-best-practices-for-better-test-design-quality

2 обязательных инструмента в вашем React-проекте для создания согласованной кодовой базы:
↳ https://thetshaped.dev/p/must-have-tools-in-your-react-project-consistent-codebase-prettier-eslint

👉 Гайды по JavaScript | дать буст

Работа с массивами

👉 Гайды по JavaScript | дать буст

Библиотека face-api.js уже давно доступна и активно используется для распознавания лиц прямо в браузере. Она работает без сервера и позволяет определять лицо, возраст, пол и эмоции на JavaScript в реальном времени.

Установка через npm:

npm i face-api.js

👉 Гайды по JavaScript | дать буст

Удалить элемент из массива

👉 Гайды по JavaScript | дать буст

В отладочных целях nuxt_js может добавлять к NuxtLink кастомный класс после того, как его маршрут был заранее подгружен.

Этот класс можно задать через проп prefetched-class, что позволяет визуально отмечать такие ссылки во время разработки.

👉 Гайды по JavaScript | дать буст

Шпаргалка по вызовам API JavaScript

👉 Гайды по JavaScript | дать буст