Гайды по JavaScript | Программирование
8.15K subscribers
3.17K photos
76 videos
20 files
3.23K links
Наглядные и доступные гайды в картинках по языку программирования JavaScript

Связь: @devmangx
加入频道
В следующей версии Bun

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

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

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


👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Иногда в проектах нужно сортировать данные по дате.

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

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

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

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Intl API + TypeScript = аккуратное форматирование нескольких валют

Смотри

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Совет дня

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

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

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

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
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 | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Когда вы учитесь писать код на JavaScript, вы, скорее всего, будете использовать функции для многих вещей.

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

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

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

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
1
5 способов определения функции в JavaScript

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Топ-8 архитектурных стилей API

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
На этой неделе я плотнее поработал с 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 | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
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 | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Вам нравится читать контент на этом канале?

Возможно, вы задумывались о том, чтобы купить на нем интеграцию?

Следуйте 3 простым шагам, чтобы сделать это:

1) Нажмите на ссылку: Вход
2) Пополняйтесь удобным способом
3) Размещайте публикацию

Если тематика вашего поста подойдет нашему каналу, мы с удовольствием опубликуем его.
😁1
Работа с массивами

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
1
This media is not supported in your browser
VIEW IN TELEGRAM
Библиотека face-api.js уже давно доступна и активно используется для распознавания лиц прямо в браузере. Она работает без сервера и позволяет определять лицо, возраст, пол и эмоции на JavaScript в реальном времени.

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

npm i face-api.js


👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Удалить элемент из массива

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
2
В отладочных целях nuxt_js может добавлять к NuxtLink кастомный класс после того, как его маршрут был заранее подгружен.

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

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Шпаргалка по вызовам API JavaScript

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM