Свідомий JavaScript 🇺🇦 @svidomyi_js Channel on Telegram

Свідомий JavaScript 🇺🇦

@svidomyi_js


🔸Будуємо україномовне JS комʼюніті
🔸Цікаві мовні факти
🔸Перевір свої знання

Запросити друзів: https://t.me/+mB6Bi1YQ81YzY2Ni

Свідомий JavaScript 🇺🇦 (Ukrainian)

Давайте розпочнемо наше захоплення з JavaScript разом на каналі "Свідомий JavaScript 🇺🇦"! Цей канал - ідеальне місце для усіх, хто цікавиться програмуванням на цій мові. Ви знайдете тут не лише корисні поради та секрети роботи з JavaScript, але й цікаві мовні факти, які піднімуть вашу ерудицію на новий рівень. Крім того, на каналі проводяться різноманітні вікторини та перевірки знань, які допоможуть вам поглибити свої знання та вміння. Не пропустіть можливість запросити своїх друзів на цей захоплюючий канал, де ви зможете побудувати україномовне JS ком'юніті та знайти нових друзів з аналогічними інтересами. Приєднуйтеся до нас прямо зараз!

Свідомий JavaScript 🇺🇦

15 Oct, 06:44


👨‍💻Ресурси для вивчення регулярок

Щоб вивчати та працювати з регулярками було трошки легшим заняттям, то пропоную до вашої уваги кілька вебсайтів:

🔸RegExr – це онлайн-інструмент для вивчення, створення та тестування регулярних виразів. Цей проєкт є опенсорсним, тож можете глянути їхній код на гітхабі

🔸Regulex – це онлайн-Інструмент візуалізації регулярок, який полегшує розуміння регулярних виразів

🔸Regexone – це такий собі
підручник з вивчення регулярок. Посилання веде одразу на туторіал

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

14 Oct, 13:58


👨‍💻 Регулярні вирази у JavaScript

Регулярні вирази – це як мультитул для роботи з текстом. Перевірка емейлу, знаходження хештегів в тексті, парсинг URL — усе це та ще багато іншого можна зробити за допомогою регулярок.

Регулярка — це просто шаблон, який ми створюємо, щоб знайти, замінити або видалити шматки тексту.

Створення регулярки:

const firstRegex = /hello/i;
// або через конструктор
const secondRegex = new RegExp('hello', 'i');

Флаги:

🔸g – Global. Знайде всі входження, а не тільки перше.
🔸i – Case-insensitive. Не враховує регістр.
🔸m – Multiline. Пошук в багаторядковому тексті.

Приклади:

/g:

const regexG = /a/g;
console.log("banana".match(regexG)); // ['a', 'a', 'a']

/i:

const regexI = /HELLO/i;
console.log(regexI.test("Hello")); // true

/m:

const regexM = /^a/m;
console.log(regexM.test("b\na\nc")); // true


Методи:

🔸.test() – повертає true, якщо шаблон знайдений в рядку, інакше false.
🔸.exec() – повертає масив з деталями знайденого збігу або null.
🔸.match() – знаходить всі збіги в рядку і повертає їх як масив.

Приклади:

.test():

const regexTest = /Java/i;
console.log(regexTest.test("JavaScript")); // true

.exec():

const regexExec = /Java/i;
console.log(regexExec.exec("JavaScript")); // ['Java', index: 0, input: 'JavaScript', groups: undefined]

.match()

const str = "JavaScript is great";
const regexMatch = /a/g;
console.log(str.match(regexMatch)); // ['a', 'a', 'a']

Де використовувати регулярки?

🔸Перевірка формату електронної пошти, телефонних номерів, поштових індексів і так далі.
🔸Пошук певних слів, фраз, символів у тексті та їх заміна або видалення.
🔸Виділення хештегів, посилань, користувачів у тексті (наприклад, в соціальних мережах)
🔸Розбір URL на компоненти (домен, шлях, параметри запиту)
🔸Витягування корисної інформації з HTML-сторінок
🔸Спліт рядків за певними роздільниками, які можуть бути доволі складними
🔸Читання і розбір рядкових даних з лог-файлів, конфігураційних файлів тощо

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

14 Oct, 13:58


Всіх вітаю! 👋

Вибачаюсь, був трошки завал, тому каналом не було часу займатись. Але наче зараз час зʼявляється, а це означає, що дописи знову будуть регулярними.

Дякую всім, хто залишається тут! 🙌

Нижче буде допис про регулярні вирази – це досить цікава тема та деяким людям вона спочатку здається зовсім незрозумілою, тому подумав, що буде непогано про неї написати

Бажаю всім гарної суботи та в цілому гарних вихідних 🙏

Свідомий JavaScript 🇺🇦

05 Oct, 18:18


👨‍💻 You Might Not Need*

Завжди, коли збираюсь встановити lodash, то думаю чи дійсно він мені потрібен?

Є класний вебсайт з прикладами, як виглядатимуть функції з lodash'у написані на чистому JavaScript. Посилання внизу, рекомендую.

Також, на цьому сайті є декілька розділів на тему "You might Not need":

🔸Власне You might not need Lodash
🔸You might not need JavaScript
🔸You don’t need Moment.js
🔸You may not need Axios
🔸You might not need jQuery
🔸You don’t need Bootstrap
🔸You might not need Redux
🔸You might not need a CSS framework

З приводу Moment.js вже було багато дискусій, але його все рівно продовжують юзати. Доречі класна альтернатива – це Day.js

💻 Посилання – https://youmightnotneed.com

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

02 Oct, 12:59


Трошки про асинхронні функції у JavaScript

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

02 Oct, 09:50


Є декілька нюансів по задачі, яку надавав вище. Справа в тому, що Node JS може поводитись по-різному в різних середовищах:

В браузері:

- В не суворому режимі, коли ви викликаєте функцію на глобальному рівні, this вказує на глобальний об'єкт (window).
- В режимі "use strict", `this` буде `undefined` для функцій, викликаних на глобальному рівні.

В середині модулів

- В середині модулів Node JS, контекст this для звичайних функцій (не стрілкових) на верхньому рівні є не глобальним об'єктом, а module.exports (що насправді є об'єктом, який ви експортуєте з модуля). Тому в модулі this буде undefined

У глобальному контексті REPL Node JS

- Знаходячись у глобальному контексті REPL this вказує на глобальний обʼєкт global. (this === global // true). Тому він не є undefined

Працюючи з джаваскрипт, ви навряд чи запускаєте код вашого проєкту в REPL, тому навряд чи опираєтесь на особливості його роботи, але все одно, відповідаючи на питання вище ви могли перевірити своє рішення запустивши код саме в REPL та отримати undefined.

Тому, якщо ви обрали варіант undefined посилаючись на REPL, то ваша відповідь також правильна 😊️️️️

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

02 Oct, 07:19


🔍 Розʼяснення для тих, хто вирішив

Коли ми викликаємо getFirst як метод об'єкта obj, this в методі getFirst вказує на об'єкт obj:

obj.getFirst() // 1

Проте, коли ми робимо деструктуризацію, то ми фактично створюємо нову змінну getFirst, яка отримує посилання на функцію getFirst з об'єкта obj. Але ця нова змінна getFirst втрачає свій "зв'язок" з об'єктом obj.

В не суворому режимі, якщо функція викликається самостійно (не як метод об'єкта), this буде вказувати на глобальний об'єкт (у браузерах це window). Проте, в режимі "use strict", this не вказує на глобальний об'єкт у функціях, викликаних самостійно. Замість цього, його значення буде undefined. Таким чином, ви отримаєте помилку "Cannot read properties of undefined".

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

02 Oct, 07:14


Що буде виведено після виклику функції?

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

02 Oct, 07:14


Вітаю! Бажаю всім гарного понеділка та продуктивного тижня 🙏

Новий тиждень – нові задачі😊 Нижче задача від каналу:

Свідомий JavaScript 🇺🇦

29 Sep, 07:04


🔍 Розʼяснення для тих, хто вирішив

typeof null вертає "object". Ця поведінка тягнеться ще з моменту створення JavaScript (напевно тоді ще не знали, що мова може стати такоб популярною).

typeof Object.create(null) – створює новий об’єкт із зазначеним об’єктом-прототипом. У цьому випадку він створює об’єкт без прототипу (null). Коли ми отримаємо тип цього об’єкта, він правильно повертає «об’єкт», оскільки це насправді є об’єктом.

Тому "object" == "object" дасть в результаті true

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

28 Sep, 06:29


👨‍💻 Альтернативи console.log про які ви не знали

А може й знали, але не користувались 😊 Так от, console.log - не змінний помічник при дебаг процесах під час написання коду. Але мало хто знає, що обʼєкт console має декілька інших варіацій:

🔸console.warn() та console.error()

Ці два методи корисні, коли вам треба показати помилку або попередження в консолі. Думаю кожен з вас бачив результати виконання цих методів у консолі отримуючи вбудовані JavaScript помилки чи попередження від бібліотек, якими ви користуєтесь.

🔸Замір часу виконання коду – console.time()

Про це писав в іншому дописі, але повторюсь, що console.time() допоможе вам заміряти час виконання частини коду.

🔸Трасування — console.trace()

Метод, який записує у коноль трасування стеку з точки, де була викликана функція. Трасування включає в себе повний стек викликів, а також дані такі як ім'я файлу та номер рядка.

function trace(){
console.trace()
}
function randomFunction(){
trace();
}


🔸Групування console.group()

Дозволяє обʼєднати декілька консоль логів у групи. Якщо ви згрупуєте повідомлення консолі, ви зможете зробити вашу консоль легшою для читання.

console.log("Test1!");

console.group("My message group");

console.log("Test2!");
console.log("Test2!");

console.groupEnd()

🔸console.table()

Про цей метод теж був окремий пост. Підійде для більш детальної візуалізації, наприклад, обʼєктів.

const person = {
name: "Ivan",
age: 27,
};

console.table(person);

🔸Написання CSS в консолі

Це окремий вид цікавостей 😅 Виявляється в консолі можна писати CSS стилі:

console.log("%cCSS in console",
"color: red; background-color: lightblue; border: solid");

Такий метод більше підійде, якщо дуже хочеться здивувати себе та код-ревʼювера, але чому б ні.

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

27 Sep, 14:47


🔍 Розʼяснення для тих, хто вирішив

При множенні спочатку Javascript намагається перетворити масив на рядок, потім рядок намагається перетворити на число, а потім виконує аріфметичну операцію. В даному випадку 2*3 = 6

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

27 Sep, 14:08


🔍 Розʼяснення доступне по кліку на лампочку після обраного варіанту відповіді

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

27 Sep, 06:43


Доречі, Лія колись, ще у 2019 році, була у Харкові на конференції Kharkiv CSS. Організатор цієї конференції, доречі мій хороший друг, дуже хотів щоб в неї вийшло приїхати в Україну. Так от вона приїхала, ще й на останніх строках вагітності та зробила досить цікаву доповідь. 😅

Ось посилання для тих, кому цікаво – https://www.youtube.com/watch?v=PNVygpWE4lI

Свідомий JavaScript 🇺🇦

27 Sep, 06:40


Нещодавно постив State of CSS за 2023 рік, а сьогодні прийшла розсилка про започаткування State of HTML. Знаю як всі скептично ставляться до верстки та тим більше до HTML, але, тим не менш, написання правильного та доступного HTML коду є не менш важливою задачею ніж зробити правильні реакт/ангулар/вью компоненти. Та й взагалі, сучасний JavaScript розробник повинен знати HTML + CSS на хоча б середньому рівні (в основному це стосується Front-End розробників).

Дизайнінгом опитування State of HTML займалась Лія Веру. Лія Веру – обраний член W3C Technical Architecture Group (TAG). TAG — це спеціальна робоча група W3C, яка гарантує, що всі нові веб-технології добре розроблені та узгоджені з рештою веб-платформи. А що таке W3C можна почитати тут.

Так от, якщо ви пишете HTML у себе на роботі, то прийміть участь у опитуванні та може дізнаєтесь щось нове для себе та потім імплементуєте це у себе на проекті

Посилання - https://survey.devographics.com/en-US/survey/state-of-html/2023

Свідомий JavaScript 🇺🇦

Свідомий JavaScript 🇺🇦

26 Sep, 14:17


🔍 Розʼяснення для тих, хто вирішив

У наведеному вище фрагменті коду обидва обʼєкта мають одне й те саме посилання, тому присвоєння властивості age змінить його в обидвох обʼєктах. Правильна відповідь: 30, 30

Свідомий JavaScript 🇺🇦