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

Связь: @devmangx
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Хочешь добавить крутые звуковые эффекты в своё React-приложение?

Есть библиотека с готовыми звуками, которые легко интегрируются — просто подключай и наслаждайся.

Идеально, чтобы сделать UX живее и веселее

https://www.reactsounds.com/

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Проблема: Вам нужно объявить типы в обычных .js файлах.

Решение: Используйте комментарии JSDoc.

Вот как это сделать.

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
LazyBrush

Это опенсорс JS-библиотека для рисования плавных кривых и прямых линий с помощью мыши, пальца или любого poniting устройства

https://github.com/dulnan/lazy-brush

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Большая новость для JavaScript-разработчиков

TikTok представил Lynx — мощную альтернативу React Native для создания кроссплатформенных нативных приложений на едином JavaScript-коде.

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Новая фишка в Chrome DevTools — теперь можно аннотировать перформанс-трейсы с помощью Gemini

Разрабы из Google прикрутили ИИ прямо в инструменты производительности: кликаешь два раза по ивенту в Main-треке, жмёшь «Generate label», и Gemini на основе стека вызовов и контекста подсказывает, что там вообще происходит

Фича полезная, особенно для глубокого разбора. Стоит попробовать ✌️

Работает с версии Chrome 137

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

Ознакомьтесь с блогом, чтобы узнать о новых фишках, и не пропустите премьеру ивента для разработчиков — уже завтра, 29 мая в 9:00 по тихоокеанскому времени

> https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301?gi=ae8c9249e332

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
улучшенная реализация typeof, используемая в Zod для человеко-понятных сообщений об ошибках

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

Поэтому важно убедиться, что ваши JS-приложения защищены.

В этом руководстве автор рассказывает о распространённых уязвимостях и о том, как защитить свой код.

https://freecodecamp.org/news/how-to-secure-javascript-applications/

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Крутой трюк: используй тип never в TypeScript, чтобы отлавливать необработанные случаи.

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
2
Прощай, Math.random()

В JavaScript появилась новая предложенная возможность — добавить объект Random в сам язык.

Он включает множество методов для генерации случайных значений

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5
Когда-нибудь замечал символы ^ или ~ в package.json и просто их игнорировал?

Эти маленькие значки тихо управляют обновлениями твоего приложения — и могут стать разницей между плавным обновлением и ломающим всё багом.

🔹^ (крышка): разрешает минорные и патч-обновления
→ ^18.3.1 обновится до 18.4.x, но не до 19.0.0

🔹~ (тильда): разрешает только патч-обновления
→ ~18.3.1 обновится до 18.3.2, но не до 18.4.0

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3
Формы во Vue выводят из себя?

Вспомни про useField

На картинке — чистая валидация с vee-validate

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Прокачай SEO своего Nuxt-приложения

Динамическое SEO стало проще с useHead

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1
Распространённая ошибка во Vue: забывают указать deep в watcher’ах

Первое изображение: не отслеживает вложенные изменения

Второе изображение: watcher с deep: true для вложенных объектов

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
1
This media is not supported in your browser
VIEW IN TELEGRAM
Фича в Chrome DevTools — с помощью Gemini (это ИИ-моделька гугла) можно править CSS прямо в Elements и сразу сохранять изменения в исходники

Никакого копипаста между браузером и редактором. Внес правку — она тут же в проекте. Плюс — можно тестить на лету

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
2
TypeScript: ключевые слова as и satisfies

> as — это утверждение типа. Оно говорит компилятору рассматривать значение как указанный тип, даже если оно фактически ему не соответствует.

> satisfies проверяет, соответствует ли значение заданному типу, не сужая тип и не удаляя лишние свойства.

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
5
This media is not supported in your browser
VIEW IN TELEGRAM
Синтаксис TypeScript часто вдохновлён JavaScript.

В некоторых случаях TS использует тот же самый синтаксис, но с другим назначением.

В чём разница?

🔹JS-фичи работают со значениями
🔹TS-фичи работают с типами

Вот несколько примеров:
Please open Telegram to view this post
VIEW IN TELEGRAM
2
This media is not supported in your browser
VIEW IN TELEGRAM
Динамическое освещение с помощью CSS и всего 4 строки JavaScript:

https://codepen.io/amit_sheen/pen/gbbzbeR

👉 Гайды по JavaScript | дать буст
Please open Telegram to view this post
VIEW IN TELEGRAM
В middleware роутера в nuxt_js нельзя просто так делать throw

Вместо этого ошибку нужно передать в abortNavigation() и вернуть результат как Promise ✔️

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