Зустрічайте новий формат на DOU — лайвкодинг! Ви просите — ми робимо 💥

📅 22 липня об 11:00 у цьому телеграм-каналі готуватимемось до інтерв’ю з кодування для джуна в JavaScript🔥

В’ячеслав Колдовський, Competence Manager, Programming Mentor в SoftServe покаже, як має виглядати інтерв’ю з кодування, які потрібно ставити запитання, як вирішувати завдання, на що звертати увагу, щоб пройти його успішно. Зробимо кілька типових задачок, розберемо типові помилки.

Діліться з колегами, запрошуйте друзів, беріть кота — буде цікаво 😎

#DOU_LiveCoding

У суботу 22-го липня проведу лайвкодинг-вебінарчик по підготовці до інтерв'ю з кодування по JS для джунів. Приходьте, буде цікаво і корисно :)

Сьогодні поговоримо про Set

Set (множина) існує в JavaScript з 2015 року. Set - це об'єкт, який дозволяє зберігати унікальні значення будь-якого типу, будь то примітивні значення або об'єкти.

За допомогою Set можна робити багато речей, що передбачають унікальні значення, зокрема фільтрацію дублікатів з масивів, перевірку наявності елементів, виконання математичних операцій, таких як об'єднання, перетин, різниця множин, та багато іншого.

Розглянемо приклади:

a: Щоб створити новий Set, ми використовуємо конструктор new Set().

b: Щоб додати значення до Set, використовуйте метод add(value). Кожне значення в Set повинне бути унікальним. Якщо додавати неунікальне, воно просто проігнорується.

c: Метод delete(value) видаляє вказане значення з Set. Якщо такого значення немає, нічого не станеться.

d: Метод has(value) перевіряє, чи є вказане значення в Set. Він повертає true, якщо значення є, та false в іншому випадку.

e: Властивість size повертає кількість елементів в Set. Її навмисно зробили відмінною від length, щоб ми в коді бачили, що це множина, а не масив.

f: Можна перебрати елементи Set за допомогою циклу for...of, тобто він є ітерабельним (про ітератори та генератори недавно писав в попередніх повідомленнях).

g: Метод clear() видаляє всі елементи з Set.

Про джедайський курс JavaScript

Літня група джедайського курсу JS стартує в понеділок і я як завжди отримую багато питань по курсу, питання схожі, тому публікую узагальнені відповіді в спільному чатику.

На який рівень орієнтований курс, чи підходить для новачків?

На курсі є два рівні складності - “Джедай” і “Падаван”. “Падаван” - то і є рівень для повного новачка, де ви можете послідовно з самого нуля почати робити перші кроки в програмуванні. Для тих, хто вже якісь початкові знання має і прийшов все систематизувати, то він може рухатися по рівню “Джедай”, виконуючи всі завдання, а не лише прості.

В залежності від того, скільки завдань вийде виконати у відсотках, я згенерую сертифікатик - відповідно падавана чи джедая.

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

Чому в курсі лише мова програмування і немає фреймворків, бібліотек і тому подібного?

Тут можу поділитися короткою історією курсу - він виник з моєї менторської програми, де я допомагав підготуватися людям до своєї першої роботи JS-розробника. Як виявилося, практично у всіх, хто звертався за менторством, незалежно від того, чи лише людина починає свій шлях, чи вже здавалося б зайшла достатньо далеко, і крім основ почала вивчати фреймворки, проблема виявлялася одна - відсутність найголовнішого в роботі розробника - навичок написання коду.

Що таке навичка? Це здатність зробити щось швидко, не замислюючись над кожним кроком. Наприклад, навичка водіння авто полягає в тому що водій користується кермом, педалями та важілями швидко і без зайвих роздумів. На такому рівні потрібно навчитися писати код, як мінімум з найбільш елементарними конструкціями - функції, цикли, розгалуження, елементарні типи даних - всім цим потрібно користуватися швидко, не задумуючись над тим де ставити дужечку і як має виглядати ключове слово.

Для досвідченої людини очевидно, що саме навичка написання коду є найголовнішою в професії. Навіть не просто найголовнішою, а фактично - перепусткою в професію. Це як вміння читати/писати для того щоб далі опановувати якісь знання. Якщо ще не навчився читати/писати, то немає сенсу намагатися щось вивчати складніше, просто не зможеш це зробити.

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

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

Але в навчанні це працює не так - просто “видати” якусь тему можна швидко, можете навіть погуглити на тему відео react чи angular “за 2 хвилини”. Весь JavaScript я можу розказати за кілька годин, вже такий досвід був. Але чи засвоїться все це? Звісно ні, для цього треба не лише подати інформацію, а закріпити її, зокрема практикою.

В курсі зазначено що він “практичний”, в чому полягає його “практичність”?

Формування навичок відбувається через практику - тобто виконання дій, а не просте засвоєння теорії. Оскільки “практика” для розробника полягає в тому щоб виконувати завдання, створюючи рішення і пишучи код, то власне цим ми і займаємося на спеціально відібраних завданнях, що послідовно покривають всі ключові теми JavaScript, а потім ще додатково TypeScript.

Курс розбитий на тижні, на кожен день є практичне завдання і теорія, згрупована по тижнях. Завдання виконувати не обов’язково кожен день, головне здавати хоча б частину завдань протягом тижня. Але бажано сідати за роботу кожен день, бо власне так формується звичка працювати, яка потім переходить в навичку.

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

PS. На всяк випадок нагадую, що промокод JSFORCE продовжує діяти, знижка 2042 грн.

Ще для вас анонс: тут Google Bard почав працювати в Україні, виглядає цікаво - вміє у верстку, завтра об 11:00 запиляю живий стрімчик, будемо його ганяти
https://youtube.com/live/vU6OQaZGh4Y?feature=share

Thenable в JavaScript

Сьогодні познайомимося з цікавою концепцією, про яку не завжди знають навіть досвідчені розробники - це thenable.

Thenable - це об'єкт, що має метод then. І це робить його сумісним з промісами через так званий “thenable protocol”. Відповідно, ми можемо зробити такий об’єкт і використовувати там, де очікуються проміси, у тому числі з async/await. Точно також як проміси, вони можуть бути об’єднані в ланцюжки і створювати вельми елегантні конструкції.

Розглянемо приклади:

a. Тут ми створюємо об'єкт myThenable, який є Thenable об'єктом. Це означає, що у нього є метод then, що приймає два аргументи: resolve та reject. В цьому випадку ми викликаємо resolve зі значенням 42, щоб "вирішити" Thenable з цим значенням.

b. У цьому прикладі ми передаємо Thenable об'єкт myThenable до Promise.resolve(), що створює проміс, що "вирішує" Thenable. Коли проміс буде вирішений, він виведе 42, що є результатом Thenable.

c. У цьому випадку ми використовуємо await для очікування результату Thenable об'єкту. Це працює, тому що await може працювати не тільки з промісами, але й з Thenable об'єктами. Вираз await myThenable поверне 42, що є результатом Thenable.

d. У цьому прикладі ми створюємо Thenable об'єкт mockApiCall, який імітує асинхронний запит до сервера. В методі then ми використовуємо setTimeout, щоб імітувати затримку відповіді від сервера. Коли "запит" виконаний, ми викликаємо resolve з "відповіддю сервера". Потім ми використовуємо await для очікування відповіді від "запиту".

Про thenable раджу додатково погуглити, зокрема подивитися як реалізується патерн Builder.

Отже сьогодні поганяли на стрімі Google Bard, запис вже є на каналі.

Якщо одним реченням - не вразив, але й не розчарував, є деякі цікаві фічі, рекомендую спробувати.

Короткі висновки:
Він дійсно вміє писати код і робить це близько до ChatGPT, але є враження, що справляється гірше, хоча й різниця не критична. Можливо варто навчитися ним користуватися, формуючи гарні запити (промпти).
Він дуже чуттєвий до промптів і тому важливо максимально чітко формулювати що від нього потрібно - від цього сильно буде залежати результат.
Дуже зручно, що відразу видає не один, а три різних варіанти, з яких можна обрати найкращий.
Дійсно здатен працювати з зображеннями і навіть зробив верстку по картинці, але результат не можна прийняти за задовільний, бо він багато “накреативив”, додав зайве, а потрібне “забув” додати. Професійному розробнику “допрацьовувати” такий код доведеться довше, ніж написати з нуля. Для новачка теж незрозуміло, чи воно піде на користь, бо може не допомогти, а лише заплутати.
Аналогічно справився з завданням розпізнавання коду зі скріншота - код получився близьким, але не ідентичним, він його модифікував “від себе”, що насправді досить погано, ти не можеш довірити йому цю задачу без додаткової ручної перевірки. Можливо є якийсь магічний промпт заставити його зробити один-в-один без креативу.
Цікава фіча експорту коду одним кліком в repl.it чи Google Collab, шкода, що працює лише для Python. Дуже сподіваюся що зроблять найближчим часом для інших мов, не бачу з цим жодних технічних перешкод.

Найбільш важливий висновок в тому, що між подібними сервісами почалася конкуренція, і це добре для кінцевого споживача. Очікую, що найближчим часом ChatGPT отримає підтримку роботу з зображеннями та й якісь кардинально нові фічі мають з’явитися.

Зокрема, в ChayGPT з’явився інтерпретатор коду, працює з Python, цікава досить штука, ймовірно для нього треба окреме відео зробити.

Map в JavaScript

Щоб зберігати словник ключ-значення в JS традиційно використовували об’єкти. Але в ES2015 з’явилася спеціальна структура даних Map.

Map має декілька переваг порівняно з об'єктом в JavaScript:

1. Ключі будь-якого типу: У Map можна використовувати ключі будь-якого типу, тоді як в Object ключами можуть бути лише рядки або Symbol. Наприклад, в Map можна використовувати об'єкти або навіть функції як ключі.

2. Порядок вставки: Map зберігає порядок вставки ключів, тоді як в Object цей порядок може бути неочевидним, особливо при використанні числових ключів.

3. Розмір Map: У Map легко отримати розмір (кількість пар ключ-значення) за допомогою властивості size, тоді як у Object треба використовувати Object.keys(obj).length`.

4. Методи для ітерації: Map має вбудовані методи для ітерації, такі як forEach, а також може бути прямо ітерований за допомогою for...of циклу. З Object таке можливо тільки за допомогою Object.keys(), Object.values() або Object.entries().

5. Швидків: У більшості випадків Map працює швидше порівняно з Object, особливо коли йдеться про великі колекції.

6. Вбудовані методи для маніпуляції даними: Map має вбудовані методи set, get, has, delete і clear для маніпуляції даними, тоді як для роботи з Object потрібно часто використовувати зовнішні функції або написати свої власні.

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

Тепер розглянемо приклади

a: new Map() - створює новий об'єкт типу Map. Map - це колекція пар ключ-значення, в якій кожний ключ є унікальним.

b: Метод set(key, value) дозволяє додавати елементи в Map. Ключ може бути будь-якого типу, не лише рядком.

c: Метод get(key) використовується для отримання значення, асоційованого з вказаним ключем.

d: Метод has(key) дозволяє перевірити, чи є в Map елемент з вказаним ключем.

e: Метод delete(key) видаляє елемент з вказаним ключем із Map.

f: Метод clear() видаляє всі елементи з Map. Розмір Map після цього дорівнює нулю.

WeakSet та WeakMap

З Set та Map ми вже розібралися, тепер познайомимося з досить специфічними їх близнятами - WeakSet та WeakMap.

Вони схожі до звичайних Set/Map, але потрібні для специфічних завдань - тримати об’єкти в тимчасовому сховищі, що очищається автоматично, коли об’єкт знищується в іношму місці. Це може бути, наприклад, кеш, з якого можемо діставати дані, але тільки тоді, коли вони існують, якщо вже не існують, то і в кеші їх не буде також.

Принципова відмінність від звичайних Set/Map в тому, що WeakSet/WeakMap не ітеруються та не мають властивості розміру, відповідно перебирати всі елементи не можна, можна працювати тільки на рівні окремих елементів.

Тепер, пояснення до прикладів:

a: WeakSet
У цьому прикладі створюється WeakSet, який приймає лише об'єкти. Він не має сильних посилань на ці об'єкти, тому вони можуть бути видалені, коли до них не залишиться посилань.

b: Змінна obj1 очищається, тому її можна зібрати як сміття. Після цього obj1 не буде в WeakSet, оскільки немає інших посилань на неї.

c: WeakMap
WeakMap подібна до WeakSet, але вона приймає пари ключ/значення. Це дозволяє вам встановлювати додаткові значення для об'єктів без перешкод для збирання сміття.

d: Як і з WeakSet, якщо єдине посилання на об'єкт-ключ видалено, ця пара ключ/значення може бути зібрана як сміття.

Чому самої мотивації недостатньо?

Сьогодні буде трохи незвичний пост з прикладом на JS, але він про навчання загалом.

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

Що таке мотивація? Це та іскра, яка спонукає нас на рух до наших цілей цілей. Але як будь-яка іскра вона має або запалити вогнище, або згаснути.

Мотивації непроста в підтримці, особливо, коли мова йде про довготривалі проекти, як-от навчання. Допомагають підтримувати мотивацію постійні згадки про цілі та мрії.

Мотивація є внутрішня та зовнішня. Внутрішня - то сила, що спонукає нас до дії і досягнення цілей. Можна сказати, що це бажання, яке ми конвертуємо в конкретні дії. Зовнішня мотивація - виникає від зовнішніх факторів, таких як винагорода або покарання. Наприклад, бажання отримати вищий дохід або уникнути критики.

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

Проте постійно мотивувати себе може бути складно, і тут є наступний етап - дисципліна.

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

І нарешті, звичка - найбільш потужний інструмент для досягнення цілей. Коли навчання стає частиною вашого щоденного ритуалу, воно перестає бути тяжким, ти звикаєш до цього, і порушувати ритуал стає некомфортно, ти намагаєшся його дотримуватися. Коли це трапляється, то людину вже не спинити на шляху до її цілей. Є теорія, що звичка може бути створена за 21 день, а за 42 дні звичку можна виробити двічі 🙂

Заміряємо час виконання коду в JavaScript

a. performance.now(): Цей метод повертає поточний час в мілісекундах з початку завантаження сторінки. В даному прикладі t0 - це час перед виконанням коду, а t1 - після. Різниця між ними дає нам час виконання коду.

b. console.time('someFunction') та console.timeEnd('someFunction'): Ці два методи використовуються для замірювання часу виконання коду між ними. У нашому прикладі ми заміряємо час виконання функції someFunction. Метод менш точний, ніж попередній.

c. process.hrtime(): Цей метод працює лише в Node.js, а не в браузері, він найбільш точний - повертає масив з двома числами, що представляють секунди та наносекунди. Можна звернутися до process.hrtime.bigint() і отримати час лише в наносекундах, різниця між двома викликами дозволить заміряти час на виконання.

Мітки

А чи знаєте ви, що кожна url-адреса є валідним рядком JS-коду?
Наприклад, https://programmingmentor.com.ua складається з мітки https: та коментаря //programmingmentor.com.ua.

Раніше мітки активно використовувалися в мовах програмування разом з оператором goto, що дозволяв переходити на будь-яку ділянку коду. Цікаво, що аж в 1968 році відомий вчений і програміст Едгар Дейкстра написав статтю “Go To Statement Considered Harmful”, де фактично знищів goto як концепцію, пояснивши, чому його не можна використовувати.

Похвально, що Брендону Ейху вистачило сміливості не додавати goto в JS в 1995, хоча тоді в середині дев’яностих багато розробників все ще користувалися цим оператором. А наприклад, Андерсу Гейлсбергу, автору C#, який вийшов у 2001, не вистачило сміливості і goto він додав. І в C# тепер оператор є, але за використання його в коді реального проєкту по головці не погладять :)

Тим не менше, в JS є мітки і працюють вони схоже до міток, що використовуються з goto, тільки область їх застосування обмежена. Фактично є два варіанти - вихід з циклів та переривання блоку коду.

a: Цей приклад демонструє використання міток у циклах. loop - це мітка, що асоціюється з зовнішнім циклом for. Коли умова if(i === 1 && j === 1) стає істинною, оператор break з міткою loop зупиняє виконання не лише внутрішнього циклу, але і зовнішнього. Без використання мітки, break зупинив би лише виконання внутрішнього циклу.

b: Цей приклад показує, як мітку можна використати з блоком коду, а не лише з циклами.block - це мітка, що асоціюється з блоком коду. Якщо test істинне, break block зупиняє виконання коду всередині блоку. Це означає, що рядок 'This message will never be displayed' ніколи не буде виведено в консолі.

Заморозка

Бувають ситуації, коли в коді варто обмежити модифікацію об’єкта, для цього в JS є три методи з різною “суворістю” обмежень.

a: Object.freeze() - це найсуворіший метод з трьох. Він заморожує об'єкт, забороняючи додавання, видалення та зміну властивостей. В нашому прикладі спроба змінити, додати чи видалити властивість не пройде.

b: Object.seal() - цей метод дозволяє змінювати існуючі властивості, але забороняє додавання та видалення властивостей. В нашому прикладі спроба змінити властивість пройде, але спроба додати нову властивість, чи видалити існуючу - ні.

c: Object.preventExtensions() - цей метод найменш суворий, дозволяє змінювати та видаляти існуючі властивості, але забороняє додавання нових властивостей. У нашому прикладі спроба змінити властивість чи видалити існуючу пройде, а лише додавання нової - ні.

Зверніть увагу, що всі три методи працюють на верхньому рівні об’єкта, і якщо нам треба заморозити, враховуючи всі вкладені, треба робити “глибоку заморозку” (deepFreeze) - це не є стандартною фічею JS, для цього треба взяти існуючу бібліотечку, чи написати код самостійно.

Зустрічаємося на події в телеграм-каналі DOU | Front-end за півгодини

Зустрічайте новий формат на DOU — лайвкодинг! Ви просите — ми робимо 💥

📅 22 липня об 11:00 у цьому телеграм-каналі готуватимемось до інтерв’ю з кодування для джуна в JavaScript🔥

В’ячеслав Колдовський, Competence Manager, Programming Mentor в SoftServe покаже, як має виглядати інтерв’ю з кодування, які потрібно ставити запитання, як вирішувати завдання, на що звертати увагу, щоб пройти його успішно. Зробимо кілька типових задачок, розберемо типові помилки.

Діліться з колегами, запрошуйте друзів, беріть кота — буде цікаво 😎

#DOU_LiveCoding

Сьогодні провели воркшопчик про Coding Interview для Junior з JavaScript.

Хоча ми фокусувалися на достатньо базових питаннях для інтерв’ю з розрахунку, що дивитися будуть люди, які взагалі ще ніколи його не проходили, інформація валідна для різних рівнів розробників - і мідлів, і сеньйорів в тому числі.
Також хоча приклади у нас на JavaScript, вони типові для будь-якої мови програмування.
Запис події розмістив у себе на Youtube-каналі, якщо пропустили дуже раджу продивитися https://youtu.be/0BMc9GFeYFg?t=00
В описі відео є посилання на слайди, звідти можна взяти код і самому поекспериментувати.

PS. Окремо зазначу, що сьогодні останній день, коли можна доєднатися до поточної групи мого “джедайського” курсу JavaScript+TypeSctript, наступна група буде вже восени. Реєстрація через сайт курсу: https://sj42.programmingmentor.com/

Single Responsibility

На інтерв’ю часто питають про SOLID.
Розберемо по буковках, сьогодні літера “S” - Single Responsibility Principle.

Допустимо, маємо такий код, як у функції createUserAndSendWelcomeEmail, що з ним не так?
Проблема в тому, що тут функція робить одночасно кілька речей - перевіряє коректність адреси, створює користувача, надсилає email.
І це не є добре, бо цей код має багато недоліків - окремі його частини не можна перевикористати, тести написати складніше, зрозуміти його та підтримувати складніше - і це не весь перелік.

То насправді його доречно “розрізати” на окремі функції, кожна з яких робить мінімальну можливу частину роботи. В цьому і полягає SRP. Хай загальна кількість рядків зросте, але якість коду буде суттєво вищою.

Це не жарт
https://youtu.be/CsBcuFoidXE
Ось опис вакансії https://jobs.dou.ua/companies/privatbank/vacancies/238777/

Коли я вперше побачив роботу ChatGPT, то спрогнозував, що за рік практично всі розробники почнуть користуватися ним чи іншими AI-тулами, ось ми напівдорозі :)