TGViewer
Channel Public Channel
Javascript

Javascript

@javascriptv

По всем вопросам - @workakkk

@itchannels_telegram -🔥лучшие ИТ-каналы

@ai_machinelearning_big_data - машинное обучение

@JavaScript_testit- js тесты

@pythonl - 🐍

@ArtificialIntelligencedl - AI

@datascienceiot - ml 📚

РКН: № 5153160945
Subscribers
16.9K
Photos
1K
Videos
166
Links
1.5K

Showing posts older than #980 · Back to latest

Older Posts 20 shown
Post #978 4.64K
🖥 Генераторы и итераторы в JavaScript

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

В JavaScript функция-итератор — это уникальная функция, возвращающая объект-итератор. Объект-итератор — это объект, который через метод next() возвращает объект с двумя свойствами: value и done. Свойство value представляет собой следующее значение в последовательности, а свойство done указывает, достиг ли итератор конца последовательности.

Функции-итераторы могут использоваться для перебора наборов данных, таких как массивы и объекты.

Ниже приведен пример функции-итератора, выполняющей итерацию по массиву:

function Iterator(array) {
let nextIndex = 0;
return {
next: function () {
if (nextIndex < array.length) {
return {
value: array[nextIndex++],
done: false,
};
} else {
return {
value: undefined,
done: true,
};
}
},
};
}

const array = [1, 2, 3, 4, 5];
const arrayValue = Iterator(array);

console.log(arrayValue.next()); // { value: 1, done: false }
console.log(arrayValue.next()); // { value: 2, done: false }
console.log(arrayValue.next()); // { value: 3, done: false }
console.log(arrayValue.next()); // { value: 4, done: false }
console.log(arrayValue.next()); // { value: 5, done: false }
console.log(arrayValue.next()); // { value: undefined, done: true }
В приведенном выше коде определена функция Iterator, которая принимает в качестве аргумента массив и возвращает объект итератора. Объект итератора через метод next возвращает следующий элемент массива и обновляет внутреннюю переменную nextIndex для отслеживания индекса массива.

Метод next проверяет, меньше ли nextIndex длины массива. Если это так, то метод возвращает объект со значением массива в позиции nextIndex и устанавливает свойство done в false. После этого переменная nextIndex увеличивается на единицу. Если nextIndex больше или равно длине массива, то метод next устанавливает свойство done в true.

📌Читать дальше

@javascriptv
  • 👍 15
  • 🔥 5
  • ❤ 2
Post #977 4.11K
⚡ 5 лучших шаблонов проектов React Native на GitHub для быстрой разработки приложений 📱

Список полезных ресурсов, которые ускорят разработку приложений! Эти шаблоны упрощают процесс разработки, позволяя вам быстро приступить к работе над приложениями👇

1. React Native Elements: https://github.com/react-native-elements/react-native-elements
2. Ignite CLI Boilerplate: https://github.com/infinitered/ignite
3. React Native Paper: https://github.com/callstack/react-native-paper
4. UI Templates: https://github.com/Aashu-Dubey/React-Native-UI-Templates
5. React Native Boilerplate: https://github.com/thecodingmachine/react-native-boilerplate

@javascriptv
  • 👍 8
  • ❤ 4
  • 👎 3
  • 🔥 1
Post #974 4.73K
Топ вопросы на собеседовании по JavaScript

1. Способы наследования
2. Типы данных
3. Ключевое слово this.
4. Методы call, apply, bind.
5. Замыкание (closure)
6. Область видимости (scope)
7. Каррирование (currying).
8. Параметры функции в ES6
9. Модификаторы var, let, const B
10. Коллекции Array, Map, Set Blog

#video #js

https://www.youtube.com/watch?v=0e9eyrxB-LU&list=PLwHvxJae2LazDrHm6ayqLKz6jszEn7ArQ&ab_channel=ProgBlog
  • 👍 21
  • ❤ 3
  • 😱 2
  • 🔥 1
Post #973 4.14K
🔥 Дайджест полезных материалов из мира Javascript за неделю

Почитать:
— Минуты и часы не нужны
— Создание мини игр и анимации в Online редакторе Collagen_2
— Event Loop в деталях
— Создание конвертера JSON в Typescript с помощью React, NodeJS и ChatGPT
— Web Accessibility в рассказе «A11Y от 0 до NaN»
— Создаем мини-игру с капельным эффектом и движущимися кружками. Часть 2. Финал
— JavaScript. WebRTC. Соединение браузеров напрямую без сервера, peer-to-peer
— Веб-компоненты в 2023: нужно поговорить
— Подружим Sentry и Mattermost быстро и просто через адаптер
— Генерация BDD тестов с помощью ChatGPT и запуск их через Playwright
— Latest Newsletter: Beware Of Circularity (Issue #133)
— Basic Promise in JavaScript
— Conquer MS-101: Dumpsarena Offers Reliable Study Materials
— JavaScript Magic Tricks: 6 Ways to Use 'alert'
— typeof null return object...
— Cracking the Code: Leet Code 1048 - Longest String Chain (Medium) - NileshDev
— How To Quickly Fix Production Errors Along With CORS Error
— Creating an NPM Package in 2024 (Deno, dnt)
— Singleton Connection with Transactions in MongoDB
— What is JavaScript(and what can you do with it)

Посмотреть:
🌐 Экосистема React.js 2023 (⏱ 12:45)
🌐 The Best React State Management Solution Has Been There All Along (⏱ 05:38)
🌐 This CSS Feature Replaces CSS-In-JS (⏱ 01:00)

Хорошего дня!

@javascriptv
  • 👍 12
  • 🔥 7
  • ❤ 3
Post #970 4.3K
🖥 Анимированная форма обратной связи

Хороший способ сделать ваш сайт более интересным. Проект реализован с помощью CSS, jQuery и TweenMax.js.

Посмотреть код можно тут:

https://codepen.io/izmaelmag/pen/NqyEKx

@javascriptv
  • 👍 21
  • ❤ 3
  • 🔥 3
Post #969 4.09K
🐈‍⬛ Микросервисы gRPC в NestJS: пошаговое руководство

В процессе иллюстрации возможностей gRPC создадим два микросервиса: службу заказа (order-service) и службу пользователя (user-service).

В службу заказов (order-service) внедрим API MyOrders, возвращающий фиктивные заказы пользователя. Прежде чем вернуть заказ, служба связывается с помощью gRPC с user-service для проверки прав пользователя в системе.

Такой смоделированный вариант позволит демонстрировать взаимодействие между микросервисами. При этом возможны индивидуальные отличия, например служба заказа может получать данные пользователя в режиме реального времени для отправки уведомлений на мобильный телефон или по электронной почте.

Настройка проекта
Предполагается, что вы знакомы с основами NestJS. Сначала определим специфичные для gRPC элементы.

С помощью командной строки NestJS инициализируем проекты user-service и order-service.

nest new order_service
nest new user_service


Установим специфичные для gRPC зависимости.

В gRPC определяем API в файлах буфера протокола или proto. Наши клиенты NestJS должны понимать этот интерфейс, и для этого мы будем использовать пакет ts-proto, который автоматически сгенерирует код адаптера NestJS для определений proto.

npm i --save @grpc/grpc-js @grpc/proto-loader
npm i protoc-gen-ts_proto
npm install ts-proto


Примерная структура проекта:

📌Читать

@javascriptv
  • 👍 9
  • ❤ 2
  • 🔥 2
Post #968 4.31K
Использование FileReader для чтения файлов в JavaScript

Нашли для вас туториал о том, как использовать FileReader для чтения содержимого файлов в браузере. Автор статьи на практике рассмотрел несколько примеров, как с использованием элемента input, так и Drag'n'Drop:

https://itchief.ru/javascript/filereader

#javascript #туториал

@javascriptv
  • 👍 13
  • ❤ 3
  • 🔥 1
Post #966 4.25K
Post #965 4.73K
Архитектурные стили, которые вы должны знать в 2023 году

— REST (Representational State Transfer): REST - это архитектурный стиль, в котором используются преимущественно методы HTTP, - чемпион по простоте и повсеместности. Он обеспечивает простое взаимодействие с ресурсами, что делает его основным паттерном для множества приложений и современных API.

— SOAP (Simple Object Access Protocol): SOAP, претендующий на звание тяжеловеса на арене API, отличается сложностью и мощностью. Он использует XML для определения структурированного взаимодействия. Хотя для работы с SOAP требуется клиент и сервер, он компенсирует это своей прочностью и надежностью, подобно хорошо сконструированному внедорожнику, преодолевающему труднопроходимую местность.

— GraphQL: Восходящая звезда в мире API, GraphQL предлагает гибкость и точность. Он позволяет клиентам запрашивать именно то, что им нужно, сокращая избыточность и повышая производительность. Подумайте об этом как о персональном покупателе - вы получаете только то, что просили, ни больше, ни меньше.

— gRPC (Google Remote Procedure Call): gRPC - это самый быстрый из всех API. Работающий по протоколу HTTP/2 и использующий двоичные данные, он нацелен на производительность и скорость, особенно в архитектурах микросервисов. Он подобен скоростному поезду, обеспечивающему быструю и надежную связь.

— WebSockets: Если вам нужна связь в реальном времени и двунаправленная связь, то WebSockets - это то, что вам нужно. Они идеально подходят для чат-приложений, потокового вещания и обмена данными в реальном времени - это как открытая телефонная линия между клиентами и серверами.

— Webhooks: Webhooks - это глашатаи цифрового мира. Они уведомляют клиентов о наступлении определенных событий на стороне сервера, что делает их идеальным решением для архитектуры, управляемой событиями. Представьте себе, что это ваша персональная система оповещения, которая информирует вас о том, что важно.

#советы
  • 🔥 16
  • 👍 9
  • ❤ 2
  • 🤔 2
Post #961 4.33K
📊Создание кольцевой диаграммы на JavaScript

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

(Предварительный обзор кольцевой диаграммы в изображении)

Создание кольцевой диаграммы на JavaScript в четыре этапа
Посмотрим, как быстро и легко создать визуально красивую и функциональную кольцевую диаграмму на JavaScript. Этот процесс можно разделить на четыре этапа:

1) Создание базовой HTML-страницы.
2) Включение необходимых JavaScript-файлов.
3) Добавление данных.
4) Написание JS-кода.

1. Создание базовой HTML-страницы
Для начала создадим базовую HTML-страницу с элементом <div> для размещения кольцевой диаграммы. Дадим ей идентификатор. Установим ширину и высоту на 100% без полей и отступов, чтобы диаграмма отображалась во весь экран.

<html>
<head>
<title>JavaScript Donut Chart</title>
<style type="text/css">
html, body, #container {
width: 100%; height: 100%; margin: 0; padding: 0;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
</html>


2. Включение необходимых JavaScript-файлов

Далее

@javascriptv
  • 👍 12
  • ❤ 4
  • 🔥 3
  • 👎 1
Post #959 5.22K
🔥 Дайджест полезных материалов из мира : Javascript за неделю

Почитать:
— Создатель Ruby on Rails: «Turbo 8 отказывается от TypeScript»
— Как отправлять пользовательский интерфейс по API
— Проблема код-ревью: ESLint — больше, чем просто «extend»
— Бот-сказочник, или как генерировать истории с помощью ChatGPT и Telegram
— 9 лучших консольных файловых менеджеров Linux
— Создаём с нуля своё BIM-приложение для просмотра моделей IFC формата в браузере на основе open-source библиотеки IFC.js
— Обертка для indexedDB / localStorage /…
— Как грамотный подход аналитиков может сэкономить бюджет компании за счет изменения подхода к реализации проекта
— Ускорение в 30 раз — requestIdleCallback
— Повышаем продуктивность разработки: магия общей ESLint конфигурации
— Создание приложения для распознавания текста с изображений и аудиофайлов
— Bun 1.0 got released, its Packager Manager is 10x faster then yarn
— Finally you can skip dotenv in Node
— Are you still using the ternary operator to dynamically apply Tailwind styles?
— The Fundamental Concept For JavaScript Beginners
— Latest Newsletter: Circles or Squiggles? (Issue #131)
— Node.js 20.6.0: Say Goodbye to 'dotenv'
— How to resolve the error "Unable to validate properties of null value"?
— Unlock $10 and the Future of OCR with Verifik's Scan-Prompt API!
— Set Minimum Height CK Editor/CK Editor rows="" Not Working
— SplideJS Revolutionize Your Website Design with Seamless Slider Integration

Посмотреть:
🌐 HTMX заменит Frontend?! WTF? (⏱ 12:12)
🌐 5+ CSS Features That Will Change How You Code (⏱ 17:58)
🌐 NEW Way To Create Variables In JavaScript (⏱ 01:00)

Хорошего дня!

@javascriptv
  • 👍 6
  • ❤ 3
  • 🔥 2
Post #955 5.39K
Older posts →
Threads Profile ViewerView any public Threads profile without an account.Open ThreadLook →Writing with AI? Make it sound human.Metric37 rewrites AI drafts so they read naturally. Free AI detector, 1,500 words free.Try Metric37 →