Javascript
18.5K subscribers
808 photos
119 videos
2 files
1.25K links
По всем вопросам - @workakkk

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

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

@JavaScript_testit- js тесты

@pythonl - 🐍

@ArtificialIntelligencedl - AI

@datascienceiot - ml 📚

РКН: № 5153160945
Download Telegram
⭐️ Обзор 10 приемов JavaScript для эффективного программирования

1. Объект Intl
Объект Intl позволяет форматировать числа, даты и валюту с учетом разных локалей и параметров.

Он предоставляется с множеством свойств, которые обеспечивают быстрое и безупречное форматирование данных.

Рассмотрим пример форматирования валюты:
let num = 100;

let RupeeFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "INR"})

let RupeeFormatted = RupeeFormatter.format(num);

console.log(RupeeFormatted)
//
100

let USDFormatter = new Intl.NumberFormat("en-IN",
{style: "currency", currency: "USD"})

let USDFormatted = USDFormatter.format(num)

console.log(USDFormatted)
// $100


2. Оператор ??
Оператор ?? присваивает переменной значение по умолчанию, если она null или undefined.

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

Пример:
let user = {}

let name = user.name ?? "Anonymous"

console.log(name)
// "Anonymous"


3. Object.fromEntries()
Метод Object.fromEntries() преобразует массив пар “ключ-значение” в объект.

Возьмем следующий массив и создадим из него объект, как показано ниже:
let arr = [["name", "Alice"], ["age", 25]]

let obj = Object.fromEntries(arr);

console.log(obj)
// {name: "Alice", age: 25}


4. Array.flat()
Метод Array.flat() преобразует вложенный массив в один единственный.

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

Пример:
let arr = [1, [2, [3, [4]]]];

let flat = arr.flat(Infinity)

console.log(flat)
// [1, 2, 3, 4]


5. Оператор ?
Оператор ?. обеспечивает доступ к свойствам объекта без проверки, является ли он null или undefined.

Используйте его, когда не знаете, существует ли объект или нет.

Пример:
let user = null

let age = user?.age

console.log(age)
// undefined


6. Array.reduce()
Метод Array.reduce() применяет функцию к каждому элементу массива и суммирует результат в одно значение.

Пример сложения всех чисел массива:
let arr = [1, 2, 3, 4, 5]

let sum = arr.reduce((a, b) => a + b)

console.log(sum)
// 15


7. String.repeat()
Метод String.repeat() создает новую строку, повторяя заданную строку указанное количество раз.

Пример:
let str = "js".repeat(10)

console.log(str)
// 'jsjsjsjsjsjsjsjsjsjs'


8. Array.from()
Метод Array.from() создает новый массив из массивоподобного или итерируемого объекта.

Пример:
let str = "Hello"

let arr = Array.from(str)

console.log(arr)
// ["H", "e", "l", "l", "o"]


9. Math.hypot()
Метод Math.hypot() находит квадратный корень из суммы квадратов его аргументов.

Так, сумма квадратов 3 и 4 равна 25, а квадратный корень из 25 равен 5. Следовательно, Math.hypot(3, 4) возвращает 5.

Пример:
let hyp = Math.hypot(3, 4);

console.log(hyp)
// 5


10. Object.assign()
Метод Object.assign() копирует значения всех перечисляемых собственных свойств из одного или нескольких исходных объектов в целевой объект.

Пример:
let obj1 = {a: 1, b: 2};

let obj2 = {c: 3, d: 4};

let obj3 = Object.assign(obj1, obj2)

console.log(obj3)
// {a: 1, b: 2, c: 3, d: 4}


@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍4011🔥7👎1
🔥 Дайджест полезных материалов из мира : Javascript за неделю

Почитать:
Под капотом анимаций в React Native. Часть 2/2: Reanimated and JSI
Подборка VS Code-плагинов для Frontend-разработчиков и не только
Рефлексия в JavaScript и TypeScript: обзор основных техник. Как сгенерировать CLI-интерфейс для класса
Считаем «a=1; b=2; x=pi/3; abcos(x)»
JavaScript повсюду или почему веб-технологии захватили мир
DOM, DI и View: деревья в Angular
Как уменьшали размер VS Code, используя name mangling — сокращение идентификаторов во время сборки
Как показать миллион зданий на карте — и не сломать браузер
Одно PWA, чтоб править всеми
Как запретить разработчику делать не то что нужно?
Introduction to Sets in JavaScript: A Comprehensive Guide
Pune Escorts Services: Exploring a World of Connection and Luxury
Cortexi Reviews 2023 - Ear Drops, Ingredients, Reviews, Benefits & Price?
Latest Newsletter: Bingeing the Past and Building the Future (Issue #129)
Web Application Debugging with Sentry Session Replay: Comprehensive Walkthrough 🚀🚀
Elevate Your Buttons with CopyShareify-js: Copy, Share, and More!
The Art of Earning with Amazon's Affiliate Program
Introducing OTP Designer jQuery Plugin
EasyCaptchaJS: Simplified reCAPTCHA Integration
SysCorp Technology PVT LTD

Посмотреть:
🌐 NEW Way To Create Variables In JavaScript ( 12:13)
🌐 Help Me Teach You TypeScript ( 00:45)

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

@javascriptv
👍14🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
Glassmorphing card - Карточка в стиле стекломорфизма с плавным 3D-наклоном при наведении, созданная с помощью библиотеки Tilt.js.

https://codepen.io/pieter-biesemans/pen/QWKmXEE

@javascriptv
👍153🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Video Sharing Platform UI

Пользовательский интерфейс платформы обмена видео, реализован с помощью CSS и JS

#анимация #css

https://codepen.io/TurkAysenur/pen/abvrNgx

@javascriptv
👍102🔥2
💬 10 ключевых концепций JavaScript

1. Замыкания
▪️Замыкания обычно используются в JavaScript для создания частных переменных и инкапсуляции. Определяя переменные во внешней функции и возвращая внутреннюю функцию, которая обращается к этим переменным и изменяет их, можно контролировать видимость и манипуляции с данными. Это позволяет добиться сокрытия информации и избежать загрязнения глобального пространства имен.

▪️Когда outerFunction вызывается и присваивается замыканию, создается замыкание, которое сохраняет ссылку на outerVariable. В дальнейшем при вызове замыкания оно будет иметь доступ к outerVariable и может регистрировать ее значение.

▪️Замыкания часто используются в таких сценариях, как обработчики событий, обратные вызовы и поддержание состояния в функциональном программировании. Они обеспечивают создание постоянных ссылок на переменные и позволяют использовать эффективные и гибкие методы программирования в JavaScript.

2. Промисы
▪️Промис представляет собой конечный результат асинхронной операции, который может быть либо разрешенным значением, либо причиной отказа. Промис бывает в трех состояниях: ожидающий, выполненный, отклоненный.

▪️Для создания промиса используется конструктор Promise, который принимает функцию обратного вызова с двумя параметрами: resolve и reject. Внутри этого обратного вызова выполняется асинхронная задача с вызовом либо resolve(value) для выполнения промиса со значением, либо reject(reason) для отклонения его с указанием причины (обычно это объект error).

▪️Метод then() используется для обработки выполнения промиса. Он принимает функцию обратного вызова, которая получает разрешенное значение в качестве аргумента. Можно объединить несколько вызовов then() в цепочку для выполнения последовательных операций или преобразований разрешенного значения.

▪️Метод catch() используется для обработки отказа от выполнения промиса. В качестве аргумента он принимает функцию обратного вызова, которая получает причину отказа (ошибку). Обычно он используется в конце цепочки промисов для обработки ошибок, возникших во время асинхронной операции.

▪️Промисы также предоставляют дополнительные методы, такие как finally(), позволяющий указать обратный вызов, который будет вызван независимо от того, выполнен промис или отклонен, и Promise.all(), который можно использовать для ожидания выполнения нескольких промисов.

3. Прототипы и прототипное наследование
▪️Прототип — это объект, от которого другие объекты наследуют свойства и методы. При обращении к свойству или методу объекта JavaScript сначала проверяет, есть ли это свойство у самого объекта. Если нет, он просматривает цепочку прототипов в поисках прототипа объекта, затем прототипа прототипа и так далее, пока не найдет свойство или не достигнет конца цепочки.

В этой программе используются функции-конструкторы Animal и Dog.

▪️Функция-конструктор Animal принимает параметр name и присваивает его свойству name вновь создаваемого объекта с помощью this.name.

▪️Добавляем метод greet в Animal.prototype, который будет общим для всех экземпляров, созданных с помощью функции-конструктора Animal.

▪️Функция-конструктор Dog расширяет Animal с помощью Animal.call(this, name) для наследования свойств от конструктора Animal.

▪️Образуем цепочку прототипов, создав новый объект с помощью Object.create(Animal.prototype) и присвоив его Dog.prototype. Это связывает прототип экземпляров Dog с Animal.prototype, обеспечивая наследование.

▪️Добавляем в Dog.prototype метод bark, который предназначен для экземпляров, созданных с помощью конструктора Dog.

▪️Создаем экземпляры Animal и Dog с помощью ключевого слова new. Экземпляр animal использует метод greet, унаследованный от Animal.prototype, а экземпляр dog использует как метод greet, унаследованный от Animal.prototype, так и метод bark, определенный в Dog.prototype.

📌Читать

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
19👍6👎1🔥1
👍83🔥2
Please open Telegram to view this post
VIEW IN TELEGRAM
👍10🔥63
This media is not supported in your browser
VIEW IN TELEGRAM
Responsive Social Platform UI — красивый адаптивный интерфейс социальной платформы, реализованный с помощью Alpine.js

https://codepen.io/TurkAysenur/pen/RwWKYMO

@javascriptv
15👍3🥰2
🔥 Дайджест полезных материалов из мира : 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
👍63🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Diagonal Layouts - анимация заднего фона с изменения по ползунку, реализована с помощью CSS и JS

https://codepen.io/enbee81/pen/yLyrmyg

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥21
This media is not supported in your browser
VIEW IN TELEGRAM
📊Создание кольцевой диаграммы на 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍124🔥3👎1
This media is not supported in your browser
VIEW IN TELEGRAM
VideoCall App UI — изящный пользовательский интерфейс приложения VideoCall, реализованный с помощью jQuery.

https://codepen.io/aybukeceylan/pen/pobbEYB

@javascriptv
👎9👍71🔥1
Архитектурные стили, которые вы должны знать в 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👍92🤔2
This media is not supported in your browser
VIEW IN TELEGRAM
Creativity Now — 3D-текст, созданный на Blender. Анимация замены оформления реализована с помощью Tree.js.

#анимация #Blender #Treejs

https://codepen.io/ScavengerFrontend/pen/mdRrVVO

@javascript
👍152🔥1
Использование FileReader для чтения файлов в JavaScript

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

https://itchief.ru/javascript/filereader

#javascript #туториал

@javascriptv
👍133🔥1
🐈‍⬛ Микросервисы 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
Please open Telegram to view this post
VIEW IN TELEGRAM
👍92🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Анимированная форма обратной связи

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

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

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

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍213🔥3
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Magic Wand Reveal - красивый эффект хайд для изображений.

https://codepen.io/Hyperplexed/pen/wvQzbGz

@javascriptv
Please open Telegram to view this post
VIEW IN TELEGRAM
👍14🔥31
🔥 Дайджест полезных материалов из мира 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🔥73