Корисний ресурс тижня: JavaScript30

💡 Усі статті, обговорення, новини про Front-end — в одному місці. Приєднуйтесь до Front-end спільноти!

JavaScript30

До навчання

Цього тижня в нас безкоштовний курс з 30 проєктів на чистому JavaScript: ніяких бібліотек, фреймворків — лише Vanilla JS. Якщо хочете розібратися, як працюють ваші улюблені бібліотеки під капотом, і попрактикуватися в написанні коду на чистому JavaScript — цей курс для вас.

Структура курсу

В курсі 30 проєктів, бо він розрахований на місяць безперервного навчання. Проте ви можете проходити його в своєму темпі. Тут ви попрацюєте з геолокацією, localstorage, canvas і ще багато з чим. З забавного, нещодавно розбирав старі конспекти, і знайшов зошит з записами про цей курс року десь 2017 чи 2018, тобто я його в свій час теж проходив, той випадок коли old but gold.

Нижче ви знайдете кілька проєктів, які вразили мене особисто:

День 1: Drum Kit

Ви створите електронні барабани на JavaScript зі звуком. Коли ви ще попрацюєте з аудіо в браузері? Чи знали ви, що ви можете маніпулювати тегом <audio>? З бонусів, HTML і CSS вже готові для всіх, тому це все чудово виглядає.

День 6: Ajax Type Ahead

Автокомпліт для пошуку, але написаний повністю вами з нуля. Зазвичай, це все роблять сторонні бібліотеки, але тут ви отримаєте розуміння, як це працює під капотом. Ви будете працювати з fetch API, ніяких вам axios чи TanStack Query для цього.

День 10: Hold Shift to Check Multiple Checkboxes

Відмітити кілька чекбоксів утримуючи Shift, познайомить з особливостями подій в JavaScript. З мого досвіду, не всі знають про event.shiftKey в подіях в браузері, а ви дізнайєтесь.

День 15: LocalStorage and Event Delegation

Попрацюєте з localStorage API і навчитеся делегувати події. Я вважаю, що делегування подій — це супер важлива концепція, про яку мало хто знає в сучасно світі (дуже сподіваюся, що я помиляюся).

День 19: Unreal Webcam Fun

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

Для кого підійде

• Junior Frontend / JavaScript/ Fullstack розробникам: якщо ви тільки розпочинаєте свій шлях, дуже корисно починати зі справжніх основ, тоді далі буде легше.
• Досвідченим Frontend / JavaScript/ Fullstack розробникам: якщо ви вже маєте досвід, цей курс допоможе освіжити знання та дізнатися нові підходи.

Чим корисно

Знати основи — це дуже важливо. Я розумію, що одразу хочеться вхопитися за React чи Codex/ClaudeCode/Copilot і побачити результат, без зайвих зусиль, проте як людина з 10-ти річним досвідом в розробці, можу сказати, що знання основ завжди допомагало мені вирішувати дійсно складні задачі. Якщо не вірите, спитайте мого проджект-менеджера 😎.

Ціна питання

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

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