Frontend Junior // Співбесіда наживо // Альберт Пивненко // S1E2
HTML-код
- Опубликовано: 18 май 2023
- Цього разу тренуватимемося проходити інтерв'ю разом із Альбертом Пивненко. Нині Альберт працює у сфері охорони, особистої безпеки та впровадження комплексів охоронних заходів. У вільний час цікавиться розробкою, однак остаточно ще не визначився зі стеком, у який би зануривсь із головою.
Цього разу як на Альберта, так і на вас, любі глядачі, чекатиме несподіваний сюрприз! Який? Зможете дізнатися на самому етері, тож обов'язково додивіться до кінця!
LinkedIn Альберта: / albertpivnenko
Долучитися до допомоги ЗСУ
🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178
Долучитися до розвитку каналу:
🔗 send.monobank.ua/jar/9LUqtFvZXp
💳 5375411204412287
Подати заявку на участь в новому сеозні можна тут: forms.gle/fjduoCexYadKRCP17
Постійно діючий коштозбір для ЗСУ
🔗 send.monobank.ua/jar/AeXQ6YRf2X
💳 5375411202918178
Було б чудово якби Сергій давав свою коротку відповідь на ті запитання на які не було дано відповіді, так як саме такий формат був на першій співбесіді, джун front-end, дякую
Альберт молодець! Я дивився і вчився, як саме має відповідати сильний джун) Молодець, нічого сказати.
Респект Альберту за підготовку.
Ще приємно вразив фідбек від "людини в масці". Багато нової інформації для себе отримав, дякую!
Альберт крутий! Не розумію чому він без роботи і навіщо йому публічна співбесіда. Не одного мідла переплюне. "Людина в масці" - цікава фішка.
А публічна співбесіда йому нада, шоб усі узнали який він охуєнний!
@@babichweb це була не головна мотивація, але дякую )
Поставлю тута комент, за харизматику Бабіча, цей канал знахідка, сам сиджу скипти вчу!!!!! скоро на собєси шкандибати, тому вкрай необхідна інфа... Всім удачі !!!! !
Дякую!
Фідбек чудовий, дякую, мені було корисно
Всем привет из Харькова.
Не смог сдержаться, после прочитанного сообщения автора телеграмм канала про плохую погоду в середине июня... Боже, я так давно не смеялся...
Тоже копаю сейчас вёрстку и фронт.
С превеликим удовольствием буду следить за контентом. Спасибо что Бог даёт вам сил, и энтузиазма на создание таких роликов.
(писнул на русском, т.к. систиписняюсь своего "акцента", да и коверкать (мять, гляди - портить) украинский не хотелось...)
боже .. сколько скобок .. :) ... и точек.
В цьому етері було прекрасно все. Інтерв'юєр, кандидат і гарний хлопець, що давав фідбек. Отримав задоволення від перегляду та звернув увагу на багато корисних речей, які мені треба підтягнути. Дякую!
Дякую за відгук! Приходьте ще)
Працюю рік як фронтенд, але на половину питань я б без підготовки так не відповів як Альберт
Коли слухав інтерв’ю якраз і думав про питання про call, apply, bind, DOM, навіщо їх було задавати чи на них відповідати, якщо за рік роботи я ні разу їх не використовував. Наприклад DOM коли вчився на курсах обожнював, але під час інтерв’ю начисто забув як називається метод appendChild
Коли в кінці відео я заслухав фідбек від Олексія, я зрозумів що не такий я і тупий, а на ці питання я б відповідав вже опираючись на свій досвід, а не чисто по книжці
Альберту раджу шукати роботу усіма методами, так як знань для джуна в нього більш ніж достатньо
Питань про call apply в плані не було, він сам до того довів )
(Відповідаю по відео, перепрошую за неточності)
Блок Javascript.
1. Які ти знаєш способи маніпуляції DOM-елементами? Маніпулювати DOM-елементами можна, використавши метод querySelector або getElementById, де в першому методі елемент знаходиться за тегом ('class') класом ('.class') атрибутом ('class[attr]') чи айді ('#class'), а в другому методі за айді елемента ('id'). Можна навішати слухач на цей вибраний елемент за допомогою addEventListener(перший аргумент - подія 'click', другий аргумент - функція, як звичайна так і стрілочна).
2. Якщо тобі потрібно вставити в елемент інший елемент? Створити елемент і вставити його? Можна створити елемент за допомогою методу createElement(один аргумент 'будь-який тег') та вставити елемент в інший за допомогою методу innerHTML or insertAdjacentHTML(перший аргумент - положення елементу зсередини 'beforeend', другий аргумент - сам елемент el).
const div = document.querySelector('div')
const li = document.createElement('li');
div..insertAdjacentHTML('afterbegin', li);
3. Чи ти знаєш про таку штуку як reflow, repaint? reflow оновлює положення елемента, а repaint перемальовує сам елемент.
4. Як пов'язане використання DOM api з цими процесами? Можливо не по темі, скажу що для DOMу легше перемалювати об'єкт, ніж оновлювати його положення.
5. Якщо ми вибираємо елемент через querySelector, чи буде reflow? Ні, не буде, це просто знаходження елементу за класом чи іншим позначенням.
6. Основна різниця між звичайною функцією в джаваскрипті, та стрілковою? Звичайна функція (function declaration) має власний контекст, стрілкова (function expression) ні. Також стрілкова функція не активується під час хоістінгу (всплиття), на відміну від звичайної функції. Також додам що стрілочну можна викликати інлайново.
7. Стрілочна функція за відсутності власного контексту, приймає від батьківского? Звісно, контекст стрілочної фукнції береться на один рівень вище, батьківської функції (НЕ стрілочної) чи глобального scope.
8. Розкажи мені про thisю Що це за звір взагалі? this прийшов з OOP (Object-Oriented-Programming), який грунтується на прототипах та класах, і сама суть this - посилання на елемент, в тілі якого знаходиться.
[коментарій завеликий]
9. Як ти можеш замінити this? Поставити замість this назву самого елементу, в тілі якого this знаходиться.
(Альберт каже про методи на випадок втрати контексту, а саме call, apply and bind, знав про них). Call = це присвоєння контексту фукції, з подальшим її викликом. Call подібний до apply з тою різницею що apply приймає у якості аргументів масив значень, а call - аргументи через кому. Call and apply викликаються, bind не викликає функцію, лише просвоює їй контекст.
10. Що повертає bind? bind повертає значення у вказаному контексті.
11. var x = foo.bar.bind() і просто метод bind(), чи будуть вони дорівнювати? Припущу що дорівнювати не будуть через те що у змінній збережений контекст, а в методі контекст у змінній не збережений.
12. Прототип? Прототипом є дочірній клас, який йде на основі батьківського. Припущу що це йде від наслідування. До прикладу - клас Звір з чотирма ногами. Від нього йде клас Собаки, яка в конструкторі має чотири ноги від Звіра (за допомогою методу super()), та ще метод гавкати(), у якому в консолі записується гавкіт Собаки.
13. Якщо додати 1 + 3 рядочками, то отримаєш 13, чому так? Не зрозумів питання, можливо тому що діє конкатенація, що поєднує два рядки в один, тому 13 рядком.
(Альберт розказує про типізацію) так, Javascript не є суворо типізованою мовою як Typescript. Способом порівняння є ==, яке порівнює лише значення, а === порівнює не лише значення, але і типи значення (число === строка).
14. Ти порівнюєш за значенням, а як ще можна порівнювати? За типами? Не зрозумів, підштовхніть до думки, підскажіть.
15. Ну, ми наприклад говоримо про примітиви і не примітиви, як їх порівнювати? За допомогою методів, наприклад isArray. Припущу що isObject або objectOf, метод що порівнює чи об'єкт значення. Або перевірити чи є в цьому об'єкті властивості object.hasOwnProperty().
16. Знаєш про garbageCollector? Про garbageCollector не чув, цікаво почути від Альберта.
(garbageCollector в фоновому режимі продивляється елементи, на яких є посилання, маркує ті посилання які є непотрібними і видаляє. Виконується в фоновому режимі, після того як ми побудували Javascript, після побудови AST (Абстрактно-Синтетичне-Дерево)
17. Підходи до роботи з асинхронним кодом? Асинхронний код спершу - це код, який виривається з основного потоку коду в Javascript, адже він однопоточний (здатний виконувати лише одну функцію за раз). Використання асинхронного коду - означає імітування багатопоточного коду, тобто використання одночасно двох чи більше функцій водночас за допомогою промісів, таймоутів, або відправку та отримання даних з сервера за допомогою fetch then catch finally або синтаксичного цукру async and await, які виконують фетч під капотом, і нам лише потрібно створити функцію через async та отримати дані через await.
Повертаючись до теми, підходами до виконання асинхронного коду є використання промісів, у яких по замовчуванню йде стан pending, а в залежності від аргументів fulfilled чи rejected, ми передаємо значення через then чи через catch відповідно. У будь-якому випадку значення потрапляють до finally(), де виконуються.
(Альберт розповідає про eventLoop) eventLoop це середовище, у яке потрапляє потік коду в Javascript. Синхронний код відразу виконується в кол-стеку, у той час як асинхронний код потрапляє в queue, з нього в webApi (під час цього в кол-стеку відпрацьовує синхронний код). Коли синхронний код виконався, асинхронний код з webApi потрапляє в кол-стек, де виконується.
сетТаймоути та проміси працюють і різних швидкостях, тобто сетТаймоут - це макротаск, а проміс - мікро-. Тобто сеТаймоут навіть із затримкою в 0 секунд відпрацює пізніше, ніж проміс, у якого тіло синхронне, і лише виклик resolve or reject - асинхронні, й вони відпрацьовуються через then, catch and finally.
[все не влізло]
18. Async/await? Це синтаксичний цукор, головна мета якого - спростити виконання асинхронного коду, та тримати той же результат.
(Альберт: це асинхронність у синхронному коді, можем використовувати trycatch як хендлери подій).
По Javascript все.
Все ти круто написав,але стосовно асинхронного,то в чергу потрапляє результат виконання асинхронного операції. А результат виконання операції то call back котрий ти передаєш в оточення. Setimeout виконається браузером і закине call back в івентлуп.
@@IgorNovakus Точно! Не сама асинхронна функція, а результат її виконання. Дякую тобі що підправив :)
Знаєш шо для мене саме моторошне,шо чим більше починаєш щось розуміти,то тим більше питань стає. Що починаю думати як взагалі браузер всередині написан,як він в програмному забезпеченні запускається...і починаю так заглублюватися що починаю задумуватися як взагалі процесор ці 1 і 0 в картинку на екрані виводить. Як від цього всього навчитися обстраглвуватися ,блин не знаю.😅😅😅
@IgorNovakus Все це ускладнюється ще й тим що технології постійно розвиваються, і треба "тримати руку на пульсі".
Джун не знає що робить.
Мідл знає що робить.
Сіньйор знає, але мідл вже зробив.
Дуже несподівані відповіді, приємно спостерігати за міксом технічної специфікації та спрощеної інтерпретації. Годний кандидат)
Сильно💪🏼. І тут розумію що 8 міс навчання взагалі мало що дало мені…
Вау, дуже цікавий етер вийшов. Бажаю вдачі та наснаги Альберту! Дякую за крутий та корисний контент😊
Дякую! Буде ще краще!)
Альберт дійсно круто відповідав. The best! Дякую Сергій і Олексій!
Дякую за відгук!
@@babichweb Прекрасна робота, Сергій! Деякі питання повторюються від випуску до випуску, але з новим підтекстом і змістом. І глибина розкривається кожного разу по іншому. Це дуже талановито вражає!
Стараюсь аби завжди було цікаво та корисно )
Дуже корисний контент! Дякую!
Дякую за відгук!
Дякую
Дякую за перегляд )
Дуже дякую за те, що ви робите!
Було б дуже круто, якщо б ви давали маленькі шматочки коду, чи малесенький лайф кодінг 👍
Лайв кодинг планується, але як окремий вид співбесіди)
Крутий, цікавий, а найголовніше - корисний контент.
Де тут ставити мільйон вподобайок?)
На рахунок call, bind і apply було цікаво почути у фідбеці. Я думав, можливо у нас проект не настільки крутий, бо за півтора роки жодного разу їх не використовував, а глобальним пошуком в коді зміг знайти аж 1-е співпадіння, і то, та частина коду була написана більше 2 років тому.
Шановний Сергій, тут одразу виникає (прямо сама проситься) пропозиція зняти відео про call, bind і apply, для кращого розкриття даного питання)
Дякую!
Сергій, дякую за ваш контент та розвиток українського ютубу, дізналась про Ваш канал із конференції FWDAYS, Ви молодець, дякую за контент.
Дякую, дуже приємно )
Пам'ятаю Альберта ще з "Барс", тренер казав, що він технічний боєць - тепер вже не тільки в контексті єдиноборств )
Цікавий контент!!! Дякую автору!!! Чому так мало переглядів? Багато джунiв скаржаться, що немає роботи, вакансій, дика статистика 19000 кандидатів на 950 вакансій) І хто з них переглянув це відео!? Я впевнений, що навіть 20% з них не мають такого рівня, як у цього хлопця...
Дуже не погано. Сподіваюсь що Альберт знайшов свій офер. Цікаві інтерпритаціі відповідей, і явна закоханість у технологію дуже відчуваєтся. Мені б теж було б цікаво пройти таку співбесіду, єдине що в мене у арсеналі тіки React ,але ж за JS я гадаю ми б поспілкувались не меньш цікаво, бо це моє хобі вже декілько років. Як приклад до самої розгорнутої відповіді Альберта , про eventloop, можу додати те, що крім черг макро та мікро тасок, є ще одна черга "animation queue" яка відповідає за анімаціі і має найвищій преорітет.
Так, Альберт знайшов свій офер невдовзі після етеру )
Сергій, доброго дня! Як записатись до Вашого етеру?
docs.google.com/forms/d/e/1FAIpQLSfzhG-j9IqCZDB-fQMMJXVli_JC2Tbuutc6_GX7i6tikCpfNg/viewform
Дивно чути "хідер" він розробника з США 🥸
Шо таке htpc 8:06 ,підскажіть
Http
Чесно скажу мені інтервю джунів набагато більше подобаються ніж мідлів чи сіньйорів. Доречі не чув запитання по гіту хочаб базових, CORS, SEO.
forms.gle/7owzhvWxvvLXruz69
Питання може бути не коректним але скажіть, Альберт навчався як самоучка чи все ж таки проходив курси? я можливо десь пропустив цей етап)
Самоучка
Дуже круто, дякую !@@babichweb
Пару місяців назад зустрічався з ним на ш++, то шпарив по російськи тільки так, і не думав вибачитись чи спитати як мені зручніше, навіть відгуки на сайті теж російською писав. А виявляється якщо треба, то і українською вміє говорити, ото дива...)
У мене по іншому й не буває
В рабочем процессе и сейчас так бы сделал, поучаствовать в эфире и поддержать контент это осознанный выбор, сделанный мной. Для формирования разговорной культуры нужно создавать условия, никак не упрекать.
Сергій це зробив, тому і відповідь очікуванна)
Візьміть до себе дівчину на інтерв'ю) Піду добровольцем)
docs.google.com/forms/d/10eqOqH_r4BSQew6lOY5Ly0UR28Ry05UPGa3aUEgppEY/edit
Він роботу знайшов? Бо в мене знання трошечки гірші, я без ангулара, але пошук роботу то шо головою об стіну
Ще не бралися за нього всерйоз) Сподіваюсь, вдасться.
Сергію, не 1 день за вами слідкую, задумка 12+. НО, будь - ласка, попрацюйте над якістю картинки, контент достатньо цікавий, но картинка все портить. З нетерпінням чекаю наступних відео.
send.monobank.ua/jar/9LUqtFvZXp
Пустий Js нікому не треба зараз не витрачайся свій час попусту що глибоко знати його, трішки бази і все, далі все ра Реакті
Ні