- 51
- 24 290
Web X In UA
Ukraine
เข้าร่วมเมื่อ 10 ธ.ค. 2020
Привіт! 👋 Це канал для веброзробників та тих, хто цікавиться новинками у світі веб-технологій 🌐
Тут ти знайдеш навчальні 📚 та пізнавальні відео 🎥. Приєднуйся та підтримуй розвиток україномовного контенту! 🇺🇦💻✨
Тут ти знайдеш навчальні 📚 та пізнавальні відео 🎥. Приєднуйся та підтримуй розвиток україномовного контенту! 🇺🇦💻✨
Як працює SPA (Single Page Application) - Усе, що потрібно знати
Сьогодні написання додатків типу Single Page Application (SPA) стало звичною справою, і сучасні фреймворки, як-от React, Vue чи Angular, легко вирішують цю задачу. Але чи кожен із нас глибоко розбирався, як саме працюють SPA і які нативні браузерні API використовуються для їх реалізації? Адже під капотом SPA часто використовуються такі інструменти, як History API, Fetch API, DOM API і BOM, які забезпечують плавну і динамічну роботу без перезавантаження сторінок.
มุมมอง: 876
วีดีโอ
Історія створення Git та базові команди, які варто знати
มุมมอง 420วันที่ผ่านมา
Сьогодн без системи контролю версій, такої як Git, не обійтися. У цьому відео ми розглянемо, звідки взявся Git, хто його створив, а також початок роботи з локальним проектом та процесс публікації локального репозиторія на GitHub #програмування #git #github
Звідки беруться нові фічі JavaScript і що чекати в наступному стандарті?
มุมมอง 43014 วันที่ผ่านมา
TC39 - це технічний комітет, який займається розвитком JavaScript (ECMAScript). У цьому відео ми розглянемо, як виникають нов ідеї та потрапляють до стандарту, а також дізнаємося, як нов функції, ймовірно, з’являться в наступній версії ECMAScript. #програмування #ecmascript #tc39 #javascript
Deno 2.0: Що нового та чому це важливо?
มุมมอง 82921 วันที่ผ่านมา
Deno 2.0 - це впевнений крок вперед, що суттєво підвищує його привабливість та зручність, особливо в контекст сумісност з npm. У цьому відео розглянемо ключов можливості, як з’явилися в новій версії. #deno2 #nodejs #програмування #javascript #npm
Топ 5 найпоширеніших вразливостей у веб-додатках
มุมมอง 339หลายเดือนก่อน
Привіт! У цьому відео пропоную розглянути топ 5 вразливостей як найчастіше зустрічаються у веб додактках а саме - XSS (Cross-Site Scripting): Дозволяє зловмисникам виконувати зловмисний код у браузер користувача, що може призвести до крадіжки даних або захоплення сесії. SQL Injection: Вразливість, яка дозволяє маніпулювати SQL-запитами до бази даних, отримуючи доступ до конфіденційної інформаці...
scheduler.yield() - Новий підхід до покращення продуктивності веб-застосунків
มุมมอง 652หลายเดือนก่อน
Привіт! Сьогодн розглянемо функцію, яку пропонує команда інженерів Chrome - scheduler.yield(). Це нова функція, яка представлена в Chrome 115 як експериментальна можливість у рамках API планувальника. Її основне завдання - ефективніше керування часом виконання завдань на головному потоці, забезпечуючи швидку реакцію на взаємодію з користувачем. Вона дозволяє розробнику чітко вказати браузеру, щ...
Vue Composition API - модульний підхід до побудови компонентів
มุมมอง 309หลายเดือนก่อน
Привіт, у цьому відео пройдемось по основним фічам Vue Composition API - це сучасний спосіб написання компонентів у Vue.js. Він забезпечує кращу організацію логіки та повторне використання коду, особливо у великих додатках. #vuejs #програмування 0:00 - Options API 0:40 - Vue JS огляд API 4: 00 - Який зв'язок у VUE js із аніме? Рекомендую для перегляду - th-cam.com/video/yiOMSGuRtsY/w-d-xo.html
Cypress - JavaScript фреймворк для e2e тестування і не тільки
มุมมอง 225หลายเดือนก่อน
Привіт! У цьому відео коротко розглянемо JavaScript-фреймворк Cypress, який на сьогодн є одним із найпопулярніших найзручніших інструментів для написання E2E тестів не тільки. #cypress #програмування #тестування_додатків #javascript
Redis: Основні Фічі та Benchmark - Що Потрібно Знати
มุมมอง 3042 หลายเดือนก่อน
Redis (Remote Dictionary Server) - це база даних з відкритим вихідним кодом, яка зберігає дан в оперативній пам’яті, що дозволяє їй бути надзвичайно швидкою... #redis #redisinsight #програмування 0:00 - Інтро 0:17 - Пару слів про архітектуру 0:29 - Фічі, про котр ви могли не знати 1:04 - Redis може зберігати бекапи та AOF 1:30 - Бенчмарк 2:13 - RedisInsight Десктопна тула для роботи з Redis
Усе, що потрібно знати про Docker: Чому контейнери випереджають віртуальні машини
มุมมอง 7442 หลายเดือนก่อน
Що таке Docker? Використання віртуальних машин, їхн переваги та недоліки. Як створювати власн образи та керувати контейнерами за допомогою Docker Compose. #docker , #dockercompose, #україномовнийконтент, #програмування 0:00 Інтро Віртуальн машини 0:41 Докер в теорії 1:13 Створення власного docker image (React app) 3:11 - Що таке Docker Compose
Browser Extension - Концепція та реалізація (React + Webpack)
มุมมอง 2822 หลายเดือนก่อน
Browser Extension, або браузерний екстеншн, - це невелике програмне розширення, яке додає додатков функціональн можливост до вашого веб-браузера. Посилання на репозиторій - github.com/Madebyspeedster/browser-extension-example 0:00 -Інтро 0:15 - Архітектура Екстеншина 0:49 Реалізація Екстеншина - збирач нотаток 3:08 Як встановити екстеншн локально Ознайомтесь з новими фічами ECMA - 2023-24 th-ca...
TensorFlow.js машинне навчання для початківців: Модерація тексту в браузері
มุมมอง 2.4K2 หลายเดือนก่อน
Що таке TensorFlow.js? Ознайомтесь з основними концепціями машинного навчання та реалізації готової модел для модерації тексту безпосередньо в браузері. Лінка на репозиторій - github.com/Madebyspeedster/tensorflow-js-intro #TensorFlowJS, #MachineLearning, #МашиннеНавчання, #TensorFlowJSУкраїна, #МодераціяТексту 0:00 Що таке Tensorflow 0:17 Основн концепції 1:20 Реалізація модерації контенту вик...
Service Workers та Web Workers: Ключові концепції
มุมมอง 5573 หลายเดือนก่อน
Service Workers та Web Workers: Ключов концепції
Кастомний Drag&Drop + Вражаючий CSS 3D Ефект
มุมมอง 2813 หลายเดือนก่อน
Кастомний Drag&Drop Вражаючий CSS 3D Ефект
Створюємо телеграм Бота для Генерації Картинок за Допомогою OpenAI та Node.js
มุมมอง 4183 หลายเดือนก่อน
Створюємо телеграм Бота для Генерації Картинок за Допомогою OpenAI та Node.js
Дізнайтеся останні функції JavaScript (ES2024, ES2023) за 360 сек!
มุมมอง 1.1K3 หลายเดือนก่อน
Дізнайтеся останн функції JavaScript (ES2024, ES2023) за 360 сек!
Створення Реактивності за допомогою Proxy API та Reflect API в JavaScript
มุมมอง 1584 หลายเดือนก่อน
Створення Реактивност за допомогою Proxy API та Reflect API в JavaScript
Generators Function and Iterators in Javascript (Укр)
มุมมอง 2484 หลายเดือนก่อน
Generators Function and Iterators in Javascript (Укр)
New! Бета версія React 19 вже доступна. Нові хуки, React компілятор та інші покращення!
มุมมอง 7194 หลายเดือนก่อน
New! Бета версія React 19 вже доступна. Нов хуки, React компілятор та інш покращення!
Найбільш тупим, як на мене, є випадок, коли на сервері відсутні обмеження доступу (CORS) до важливих систем. Приклад з недавнього: є сайт, який безкоштовно надає доступ до моделі, але в межах певного ліміту. Проте цей ліміт встановлено лише на фронтенді. Я просто скопіював запит і відправив новий, але вже з даними, що перевищують ліміти, і отримав коректну відповідь. Прикол у тому, що тепер у мене є доступ до моделі в більшому обсязі, ніж у платній версії. Якби були налаштовані CORS або якісь інші обмеження на сервері, такого б не сталося. Не знаю, як правильно називається цей тип "взлому", і чи це взагалі взлом
Привіт! Те, що ти описуєш, можна назвати вразливістю типу "обхід обмежень на рівні клієнта" або "обхід клієнтських обмежень". Це не зовсім "взлом" у традиційному сенсі, але це певно використання помилки безпеки, оскільки ти обійшов обмеження, які встановлені лише на фронтенді.
Приємний голос, приємна мова, ще й на цікаву тему супер
Дякую!
Дякую за відео, яке дає розуміння, як під капотом працює реакт
Мені сподобалось що автор попікоувався про анімацію і акцентувався увагу на коді про який розповідає, виділяючи його:).
Лайк!
Рідко пишу коментарі, але відео дуже корисне, дякую!
@@kirilvedmidskiy 🤝 дякую
дякую за коротке та змістовне відео про SPA і приклади на чистому JS))
@@IhorVyshniakov дякую 🙌
«перехід між сторінками потребує повного перезавантаження, а це означає, що щоразу завантажується новий HTML, CSS та JavaScript». Not true. У більшості випадків HTML, CSS та JavaScript будуть завантажуватись з локального диску завдяки кешуванню.
@@VladimirObrizannot true -- partially true і звичайно у всіх воно включено це кешування?) а може ви скажете коли закінчиться це кешування, і завантажиться новий CSS чи користувач так і буде жити із початковою версією?)
@@WebxInUa 1. Оно включено у всіх. 2. Браузери роблять запит з заголовком If-Modified-Since та збарігають Last-Modified та ETag заголовки відповіді, щоб перевірити чи є нова версія.
@@VladimirObrizan а якщо сервер вкаже не кешувати? Тим не менш файли вантажаться що разу)
@@WebxInUa Якщо сервер вкаже не кешувати, то й SPA кожен раз буде завантажувати усі мегабайти коду.
@@VladimirObrizan при переході між сторінками ні, власне це я і намагаюся донести. А як щодо xmlhttp запитів? Їх теж сервер кешує?)
Круте відео, дякую P.S мені одному подача і анімації дуже нагадали стиль Fireship?
@@vladyslavprus9387 привіт, так мене надихнув fireship, тож використовую подібній стиль 🫶
це наш fireship?
@@Vlad1998996 угу, мені подобається такий жанр
🤝
Топ🔥
Це вааааааау👍😅
Дуже цікаво. Дякую!
Done! 🤣 Дякую за відео! :)
Дякую Вам за вашу працю, за ваші цікаві та корисні україномовні випуски
Дякую!
Дистанційним дідусем я не стану, проте виросту завдяки вашим відеоурокам, дуже круто, дякую 👏
@@МанефаПолумбрик 🤜🤛
Привіт, чи можна з тобою звʼязатись якось, у мене є декілька питань?
@@sexualpressure1796 привіт, я є у твітері x.com/@webxinua
Пояснення прості та чіткі. Дякую за такий гарний контент. Робіть ще - з радістю підтримаю
прикол. взагалі чувак який придумав девтулзи в далекому початку 2к прям молодець!
Крутяк. Лаконічно, та по суті. Респект.
воу! дякую за відео!
Радий, що знайшов ваш канал. Мені подобається формат fireship. І ви його вдало наслідуєте
Дякую!
Як JS розробник скажу так - забийте на ці Дено, Буни та інші JS раннери, JS хороший на беку в окремих випадках - коли бекенд не великий(не обовʼязково простий) і коли потрібні фул стек розробники. Навіщо чекати еволюцію типів в JS, перформанс в двіжку коли вже давно є C# з усіма нугет пакетами.
Шановний JS розробник, спершу ніж казати забити на js ранери, напишіть свій власний, зрозумійте яка є проблема в поточних версіях, а потім робіть висновки. Все має місце у цьому світі
@@WebxInUa час покаже чи мало воно місце. Просто за що потрібно так любити JS щоб кодити бекенди на TS. Коли є технології в яких є все те що в js повільно додають. Хоча для деяких задач дійсно JS краще і окремі сервіси можна писати на ньому.
@@realfootball338 час уже показав, node js used by - Netflix, NASA, Trello, PayPal, LinkedIn, Walmart, Uber, Twitter, Yahoo, eBay, GoDaddy
маємо проєкт якраз на node та c#, з часом команда дійшла висновку, що c# частина була помилкою, що несе за собою багато речей (інший контекст, інша ide та взагалі інша екосистема). Тут згоден, що в контексті фулстак проєкту взагалі немає сенсу дробити кодову базу на різні мови, мабуть для окремого бекенду c# може бути вдалим вибором.
endO
🤓
Bun -> Nub 😮
Thanks!
що робити з флудом з кількох IP одночасно ? багато запитів на одну й ту саму сторінку пошук з різних IP
@@IvanPetrov-b8n Привіт, є декілька способів, я б виділив 3 основні: 1. Rate Limiting: Встановіть обмеження на кількість запитів, які можуть бути зроблені з однієї IP-адреси за певний проміжок часу. Після досягнення ліміту можна кидати 429 статус - to many requests 2. IP Blocking/Blacklisting: Виявляйте та блокуйте підозрілі IP-адреси, які надсилають надмірну кількість запитів або мають схожі шаблони поведінки. 3. Captcha Verification: Впровадьте CAPTCHA для підтвердження, що запити надсилає реальна людина. Можна використовувати щось типу google captcha v3
Дуже цікаво, прошу більше інфи про веб бруд та веб гігену, але більше про веб бруд :)
Оце вже цікаво ))
класний канал, класний підхід до концентрованої подачі інформації
Супер відео, чітка і цікава інфа без зайвої води!!!
Дякую 🙏
Від себе побажання: додавайте підтримку браузерів в кінці огляду. Якщо це погано підтримується, то особисто не бачу сенсу поки витрачати на неї час. Дякую. І успіхів каналу 👍
Виглядає як цікавий спосіб підсвітки suggestions для елементів форм. Треба поексперементувати.
Виглядає цікаво) Але тепер джунам доведеться розбиратися не тільки з тим, як працює Event Loop, а ще й з тим що буде, якщо додати scheduler.yield()
Привіт, тема не з простих =) У мене є відео де я розповідю детальніше про event loop th-cam.com/video/rvqgOH5swPU/w-d-xo.htmlsi=nv8WgKxwn0RCXBQ_
індивідуальні навчання проводиш?
@@fannigurt 👋 Привіт, поки що таких планів немаю.
all the same as Playwright)
Agree, Cypress is a bit simpler, whereas Playwright is more suitable for complex and multi-threaded testing scenarios.
укр контент - агонь!
Дуже об'ємно! Інформація залетіла легше, ніж вагітна у шістнадцять
@@fom.newtester ха ха, дякую 🤩
Доступно, скільки годин на підготовку такого відео йде?
@yaroslav-harakternik Привіт, по різному, це зайняло близько 6 год
Дяка за контент українською!
Дякую Вам 🤘
Крута штука, як раз користуюсь для svelte проекту. Після npm користування bun це ракета 🚀. А що круто, то в нього повна сумісність з nodejs тому легко переходити иа користуватися. Под віндою багів ще не траплялося.
Чудове відео як завжди, було б круто глянути на розбір Redis і що воно таке=)
Дякую 🫶, замовлення готове -> th-cam.com/video/45BiGCFU_x8/w-d-xo.html
@@WebxInUa неймовірно дякую🥰
Чудовий туторіал, сьогодні налаштував nestjs + redis + postgresql, Успіхів!
Дуже добре пояснення, навіть я трохи зрозумів, а у мене докер болюча тема. Вкінці тіко шось чі то розігнався чи ніби убігати треба було, але загалом добре)
@@agony4181 привіт, дякую за коммент врахую 🫶😊
Український Fireship, дякую за відео 🧑🏼💻
@@vipercamp дякую Вам🫶
Дякую, дуже стисло і зрозуміло розібрана тема!
@@ПавелЛукашов-в1ъ дякую 🤩🙌
І знову я з подяками за контент українською :)
@@ПавелЛукашов-в1ъ дякую 🤩🫡
Подяка тобі за контент українською!
@@ПавелЛукашов-в1ъ дякую Вам за підтримку 🫶
Дякую за контент українською!
Дякую Вам за підтримку! 🙌