У моєму шляху фронтенд-розробника з червня місяця я вивчив багато нових технологій, удосконалив свої існуючі навички та зробив важливі кроки у своїй професійній кар'єрі. У цій статті я хочу поділитися своїм розвитком, по черзі розповідаючи про вивчені технології та мій прогрес.
1. Прогрес у HTML та CSS
Коли я починав свій шлях у фронтенд-розробці, HTML та CSS стали моїми основами. У червні я використовував свої знання HTML і CSS на базовому рівні, але з часом я почав освоювати більш складні властивості CSS та сучасні техніки розмітки.
- Flexbox та Grid Layout: Створюючи макети сторінок, я навчився створювати більш ефективні та гнучкі структури за допомогою Flexbox та CSS Grid. Особливо я відкрив для себе потужність цих двох властивостей для адаптивного дизайну.
- Управління CSS за допомогою Sass: Використовуючи Sass у своїх проектах, я навчився створювати більш модульні та сталий структури CSS.
За допомогою Sass я зменшив повторення коду, використовуючи змінні, міксини та вкладені структури.
2. JavaScript та динамічні можливості
JavaScript є серцем фронтенд-розробки, і мій розвиток у цій мові був досить швидким. Мої базові знання JavaScript у червні дозволяють тепер створювати складніші та динамічніші додатки.
- Маніпуляція DOM: Я додав інтерактивність до веб-дизайнів, зроблених за допомогою HTML та CSS, використовуючи JavaScript. Маніпуляція DOM дозволила мені додавати динамічні функції, такі як перевірка форм, анімації та взаємодія з користувачем, роблячи мої додатки більш інтерактивними.
- Особливості ES6+: Перехід на можливості ES6 та пізніших версій (let/const, стрілкові функції, async/await, деструктуризація тощо) дозволив мені писати більш сучасний і ефективний код.
3. Bootstrap та адаптивний дизайн
У світі фронтенду CSS-фреймворки мають велике значення для створення зручних та естетично приємних веб-сайтів.
З червня місяця я використовував Bootstrap 5, щоб досягти прогресу як в естетичному, так і в функціональному плані.
- Використання Grid системи: За допомогою Bootstrap я навчився створювати адаптивні дизайни, розробляючи мобільно дружні сторінки. Ефективно використовуючи Grid систему, я оптимізував макети сторінок для безперебійної роботи на всіх пристроях.
- Компоненти та утиліти: Використовуючи компоненти Bootstrap, такі як Navbar, Carousel, Modal, я швидко додавав стильні та функціональні елементи до своїх проєктів.
4. Створення сучасних веб-додатків з React
React став бібліотекою, яка зробила мої проєкти більш ефективними та стійкими.
У червні, хоча я мав базові знання React, з часом я розробив глибші проєкти за допомогою React.
- Компонентно-орієнтована структура: Я вивчив компонентно-орієнтовану структуру React і почав писати більш чистий, модульний та повторно використовуваний код у своїх проєктах.
- Управління станом та Hooks: Використовуючи управління станом та можливості Hooks в React, я розробив більш динамічні та потужні додатки. Використання таких функцій, як useState, useEffect та custom hooks, дозволило підвищити продуктивність моїх React додатків.
- Маршрутизація та SPA: За допомогою React Router я реалізував логіку Single Page Application (SPA), забезпечивши плавний перехід між сторінками та правильну роботу моїх додатків на одній сторінці.
5. Управління станом з Zustand
Одним із важливих досягнень у React для мене стало використання бібліотеки Zustand для більш ефективного управління станом.
Шукаючи легше та простіше рішення для управління станом в React, я почав централізовано управляти станом за допомогою Zustand.
- Управління глобальним станом: Завдяки Zustand управління глобальним станом стало простішим, що спростило обмін даними між компонентами в додатках.
- Покращення продуктивності: Я збільшив продуктивність моїх додатків, запобігаючи непотрібним рендерам компонентів у React.
6. JavaScript та орієнтація на Backend
Розпочавши свій шлях з фронтенд-розробки, я почав виявляти інтерес до бекенд-розробки. У цьому процесі я здобув базові знання з Node.js та Express та зробив перші кроки до fullstack проєктів.
- Робота з API: Після інтеграції з бекендом, я почав використовувати API в моїх фронтенд-додатках. Обробляючи дані у форматі JSON, я здійснював операції з отримання та відправлення даних.
- Обробка даних та динамічні додатки: Я навчився отримувати ввід від користувача, взаємодіяти з бекендом і створювати динамічний контент.
TypeScript для безпечного та масштабованого коду
TypeScript пропонує більш безпечний та стійкий підхід до розробки програмного забезпечення. З червня я почав вивчати TypeScript і використовувати його у своїх проєктах, почавши писати більш надійний код з низьким рівнем помилок.
- Статична перевірка типів: Статична перевірка типів, яку надає TypeScript, значно спростила відладку моїх додатків. Використовуючи TypeScript для чіткої вказівки типів даних, я зміг зменшити ймовірність помилок у програмах.
- Анотації типів та інтерфейси: За допомогою TypeScript я визначав типи даних, що дозволило уникнути невідповідностей типів у параметрах функцій та змінних. Використовуючи інтерфейси (Interface) та типи (Type Alias), я створив більш чисту та зрозумілу структуру коду.
- Ефективність у великих проєктах: TypeScript забезпечив набагато ефективніший процес розробки у великих проєктах.
Особливо це полегшило співпрацю з іншими розробниками в команді, збільшивши масштабованість проєктів.
8. Modern CSS дизайн з Sass
Sass дозволяє створювати стилі, які виходять за межі стандартного CSS, забезпечуючи більш потужне та модульне написання стилів. Мій розвиток у використанні Sass з червня зробив управління стилями більш гнучким та сталим.
- Змінні та Mixins: Використовуючи змінні в Sass, я почав централізовано управляти палітрою кольорів та стилями шрифтів. З Mixins я створював повторно використовувані стилі, що зробило мій CSS код більш ефективним.
- Вкладеність та Partials: Завдяки властивості nesting (вкладеність) у Sass, я зробив свої стилі більш ієрархічними та зрозумілими. Також для підвищення модульності коду я використовував Sass partials (фрагменти), що дозволило розділити стилі на окремі файли, полегшуючи їх управління у великих проєктах.
- Покращення продуктивності: Я забезпечив оптимізацію коду, написаного за допомогою Sass.
Особливо я зміг покращити швидкість завантаження сторінки, усунувши непотрібні повторення.
Звісно! Ось результат, який охоплює всі пункти та загальну оцінку процесу:
Результат: Мої досягнення за 7 місяців як Frontend Developer
Сім місяців, проведених на шляху фронтенд-розробника, стали періодом, у якому я значно покращив свої навички як технічно, так і професійно. Технології, які я вивчив та розвинув за цей час, забезпечили мене міцним фундаментом і дали глибше розуміння світу програмування.
Мій шлях, розпочатий з HTML та CSS, дозволив мені здобути всі необхідні базові знання для сучасного веб-дизайну. Створюючи адаптивні дизайни за допомогою Flexbox та Grid layout, я навчився писати більш модульні та стійкі стилі, використовуючи Sass.
JavaScript став незамінним інструментом для розробки динамічних функцій та інтерактивних додатків.
Особливо завдяки особливостям ES6+ та маніпуляції DOM я зробив свої проєкти більш динамічними та зручними для користувачів.
React став наступним кроком у моєму процесі навчання. Прийнявши компонентну структуру, я навчився розробляти більш модульні, багаторазові та масштабовані додатки. Крім того, використовуючи управління станом (State management) та Hooks, я покращив продуктивність і функціональність своїх додатків.
У цьому процесі, вивчаючи TypeScript, я зробив свій код більш безпечним і сталим. Статична перевірка типів, яку надає TypeScript, зменшила кількість помилок у моїх проєктах і допомогла створити більш надійну інфраструктуру.
Використовуючи бібліотеки, як-от Zustand, я спростив і зробив більш ефективним управління глобальним станом. Я зміг здійснювати більш ефективний обмін даними в моїх React проєктах.
Нарешті, завдяки моєму інтересі до бекенд технологій, таких як Node.js та Express, я почав рухатись у напрямку fullstack-розробки.
Я здобув досвід у створенні динамічного контенту через інтеграцію API.
У процесі здобуття всіх цих навичок я розвивався не тільки в технічному плані, а й у плані вирішення проблем, управління проєктами та дисципліни в роботі. Тепер я можу більш комфортно працювати над більшими та складнішими проєктами, швидко вивчати нові технології та інтегрувати їх у свої проєкти.
У моєму шляху фронтенд-розробника я кожного дня вивчаю щось нове, і це робить мене кращим програмістом. Цей процес дав мені не тільки технічні знання в світі програмування, але й дисципліну до навчання та здатність до творчого мислення. У майбутньому я продовжуватиму цей розвиток і ставати сильнішим фронтенд-розробником кожного дня.
Перекладено з: 7 Aylık Frontend Developer Sürecim: Öğrendiklerim ve Gelişimim