Як стати повноцінним веб-розробником у 2020 році

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

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

  • По-перше, що насправді робить розробник повним стеком?
  • Перш ніж зануритися, давайте поговоримо про це
  • То з чого ми починаємо?
  • Передній кінець
  • Задній кінець
  • DevOps та хмара
  • А як щодо дизайну?
  • Інші речі, якщо ви тільки починаєте
  • Інші речі, якщо ви шукаєте більше

По-перше, що насправді робить розробник повним стеком?

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

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

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

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

Звідки ми прийшли

Сфера веб-розробки швидко змінюється. Wordpress є королівським CMS вже деякий час, представляючи понад третину веб-сайтів, які використовують CMS і допомагаючи PHP набути популярності. Але інші розробляли власні рішення.

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

Крім того, у вас може бути Javascript, який робить деякі інтерактивні функції за допомогою CSS, що керує відображенням сторінки. Зараз у деяких випадках наявність керованого сервера Wordpress - це все, що потрібно для певних веб-хостів. Але для інших великих сайтів потрібна буде інша команда для управління цими службами та конвеєр розгортання для виведення коду у виробництво.

Де ми знаходимось і куди йдемо

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

Такі послуги, як AWS Lambda, дозволяють вам створити “функцію”, яка обробляє прості введення та виведення. Приєднайте це до API-шлюзу, і у вас одразу з’явиться кінцева точка, з якою ви можете взаємодіяти, не маючи потреби керувати сервером.

Інші, такі як S3, дозволяють скидати HTML, CSS, JS, зображення та будь-які інші статичні активи у сховище та обслуговувати сайт безпосередньо з нього. На сервері нічого не обробляється, ви просто подаєте статичні файли клієнту.

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

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

Команди DevOps тепер керують хмарними ресурсами та розгортаннями. Розробники бекендів тепер створюють API та код, який взаємодіє зі службами за допомогою таких інструментів, як лямбда-функції. А розробники інтерфейсу працюють в основному у програмах Javascript React або Vue, які звертаються до служб, створених вашими серверними розробниками. Можна стверджувати, що це може включати, а може і не включати речі, такі як CSS, але це ще одна черв'ячка щодо того, під який заголовок "офіційно" підпадає (спойлер: залежить від команди).

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

Перш ніж зануритися, давайте поговоримо про це

Це може бути досить спокусливо захотіти зануритися прямо і охопити весь спектр розробника повного стека, але про фокус є що сказати. Це основа виразу «валет усіх торгів, майстер жодної справи», де ви намагаєтеся вивчити трохи кожної частини повного стека і ніколи нічого не опановуєте.

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

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

Крім того, частина того, що є розробником повного стеку, не обов’язково може сказати, що ви знаєте мови x, y та z. Розуміння концепцій коду та програмного забезпечення, а також здатність вирішувати будь-які складні завдання, відкладаючи вбік, - ось що робить чудового розробника.

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

То з чого ми починаємо?

Для цілей цієї статті ми збираємося дотримуватися традиційних точок зупинку того, що розбиває стек (передній кінець, задній кінець тощо). Хоча деякі люди кажуть, що це насправді вже нічого не існує, реально, існує безліч робочих місць для розробників повних стеків, і щодня вони посилаються на традиційні точки зупинку. "Повний розробник стеків" точно нікуди не дінеться.

Що стосується стека, ми будемо спиратися на безсерверну архітектуру / архітектуру JAMstack, оскільки це просто буде продовжувати рости. І якщо ви їх вивчите, це лише зробить вас більш привабливими з кількістю робочих місць, що з’являться навколо нього.

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

Хоча ви можете працювати в React і вам це зручно на вашій поточній роботі (це нормально!), Ваша наступна робота може бути важкою для Vue або "сюрпризом!" керівник вашої команди хоче переписати програму в Svelte. Спробуйте зрозуміти, чому ви в першу чергу використовуєте фреймворк інтерфейсу та як це допомагає вам вирішити проблему.

А тепер давайте займемося цим ...

Передній кінець

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

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

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

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

То що я повинен навчитися?

Якщо ви справді новачок, знайдіть час, щоб вивчити базові HTML та CSS. Це може бути не так весело і привабливо, як копати прямо в Javascript, але спираючись на основи того, що робить Інтернет, буде ключовим для початку з правої ноги.

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

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

Говорячи про фреймворки, React та Vue, мабуть, найкращі кандидати з огляду на їх популярність. React - найпопулярніший продукт, який продовжує зростати. Її команда постійно працює над дозріванням фреймворку та розробкою API, які допоможуть створювати сучасні, швидкі веб-програми.

Початок роботи з Create React App або Gatsby навіть допоможе вам легко закрутити додаток React і негайно потрапити в позицію, коли ви зможете повозитися в коді.

Хоча було б корисно закликати препроцесори CSS та інструменти, такі як Sass, зараз існує маса рішень для CSS, включаючи CSS-in-JS.

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

Розуміння основ та потужності CSS та того, як використовувати його у ванільній формі, допоможе підготувати вас до його використання незалежно від структури.

Ресурси

  • freecodecamp.org Адаптивна сертифікація веб-дизайну //www.freecodecamp.org/learn
  • “Занесіть Javascript: Спочатку вивчіть HTML і CSS“ //www.freecodecamp.org/news/put-down-the-javascript-learn-html-css/
  • Вступ MDN до Javascript //developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
  • Курс електронної пошти Just Javascript //justjavascript.com/
  • Навчальна гра JSRobot //lab.reaal.me/jsrobot/
  • responsejs.org Вступ до React //reactjs.org/tutorial/tutorial.html
  • Підручники для gatsbyjs.org //www.gatsbyjs.org/tutorial/

Задній кінець

У світі JAMstack задній кінець, як правило, стосується API, які наші інтерфейси використовують для створення динамічного досвіду, взаємодіючи з кінцевими точками від клієнта (наприклад, у CRUD API). Можливість робити ці запити від клієнта усуне необхідність виконувати будь-яку з цих обробок перед тим, як сторінка буде подана в браузер.

Хоча ви не повинні відчувати, що можете коли-небудь кодувати лише однією мовою, можливість писати на Javascript дає тут приємну перевагу, оскільки ви можете перерости в основи роботи із зворотним боком речей зі звичною мовою (або навпаки з переднім кінцем).

NodeJS - це загальне середовище виконання, яке ви знайдете в більшості хмарних середовищ, як варіант, і надасть вам подібний досвід, як ви очікуєте від браузера. Головна відмінність полягає в тому, що у вас не буде доступу до певних API браузера, а також не буде windowоб’єкта та пов’язаних з ним API.

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

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

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

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

То що я повинен навчитися?

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

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

Можливо, побудуйте кінцеву точку, яка може надсилати твіт за допомогою Twitter API (але не зловживайте цим). Дізнайтеся, як створити базу даних і налаштувати свою функцію для взаємодії з нею за шаблоном CRUD, що дасть вам більш реалістичний варіант використання того, як типовий додаток може взаємодіяти з серверною базою.

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

Ресурси

  • “Супер простий старт до безсерверного” //kentcdodds.com/blog/super-simple-start-to-serverless
  • «Створення безсерверних CRUD-додатків із функціями Netlify & FaunaDB» //www.netlify.com/blog/2018/07/09/building-serverless-crud-apps-with-netlify-functions-faunadb/

DevOps та хмара

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

Ця робота може варіюватися від багатьох обов’язків до кількох, будь то написання скриптів bash для власного рішення або написання шаблону CloudFormation, який створює всі ресурси, необхідні для запуску програми.

Як правило, це включається як частина більшої оркестрації робочих процесів CI / CD, які автоматизують процес збирання та розгортання.

І це постійно змінюється! Враховуючи безсерверний бум, з’явився безсерверний фреймворк, який простіше управляє багатьма з них, що навіть змушує AWS створювати власні SAM-рішення. Такі інструменти, як Дженкінс, вже деякий час існували для частини CI / CD, але зараз ви бачите, що Github, Gitlab та інші провайдери контролю джерел пропонують свої власні рішення та інструменти, такі як CircleCI, які підключаються безпосередньо до вашого проекту.

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

Але це покращується, саме тут вкладаються такі продукти, як Netlify та Zeit. Хоча вони більше кореняться на стороні статичного хостингу, коли ви компілюєте свою програму та скидаєте її на зберігання, їх пропозиції зростають, як Функції Netlify, які є насправді просто лямбди AWS, які простіше встановити та розгорнути до повністю функціонуючої кінцевої точки (це серйозно надзвичайно просто).

То що я повинен навчитися?

Якщо ви вперше налаштовуєте подібні речі, почніть з Netlify. Налаштуйте програму React або навіть просто простий HTML-файл у сховищі Github, підключіть його до нового облікового запису Netlify і спостерігайте за його розгортанням.

Звідти, або якщо у вас вже є невеликий досвід, почніть цікавитися, що відбувається за лаштунками. Netlify, швидше за все, бере ваш код, запускає команди, які ви налаштували (наприклад yarn build) у віртуальному середовищі, скидаючи файли, вбудовані в сховище, як S3, і ставить CDN перед ним, як CloudFront, для обслуговування з кінцевої точки.

Спочатку спробуйте зробити це вручну з вашого комп’ютера за допомогою консолі AWS та їх CLI, а потім напишіть сценарій для автоматизації всього процесу, що інтегрується з Circle CI у ваш проект Github, замість Netlify, щоб фактично його розгорнути на AWS.

Якщо взяти цю виїмку, вона включатиме спінінг-сервіси, з якими може взаємодіяти ваш задній кінець. Чи маєте ви базу даних, якою користуються ваші послуги? Ви можете автоматизувати обертання цієї бази даних за допомогою скриптів CloudFormation або bash.

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

І все це стосується будь-якого постачальника хмарних послуг або CI / CD, а не лише AWS та Circle CI. Виберіть свій улюблений інструмент хмари та робочого циклу та запустіть з ним. Сенс у тому, що почніть розглядати потреби вашого проекту і вивчити, що насправді відбувається в автоматизованих частинах стека. Це допоможе вам дізнатися більше та стати більш винахідливим для потреб вашого проекту.

Ресурси

  • “Покроковий посібник: Розгортання на Netlify” //www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/
  • “Налаштування статичного веб-сайту” //docs.aws.amazon.com/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html
  • «Навчання сертифікованих хмарних практиків AWS 2019 - Безкоштовний 4-годинний відео-курс» //www.freecodecamp.org/news/aws-certified-cloud-practitioner-training-2019-free-video-course/
  • Див. Ресурси Javascript у Front End вище

А як щодо дизайну?

Так, ви повинні розуміти основи дизайну. Ні, вам не потрібно бути дизайнером.

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

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

Розгляньте розробника, який створює API, щоб дозволити комусь керувати користувачами в програмі. Вимоги до API досить м'які і включають лише ім'я користувача. За умови, що одне поле «ім’я» замість «перший» та «останній» може бути не найбільш інтуїтивним рішенням для більшості. Але це може бути недогляд, який ускладнює те, як розробник інтерфейсу виставляє це в інтерфейсі користувача, що заважає розробникові відображати його або може спричинити незрозуміле споживання кінцевим користувачем.

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

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

То що я повинен навчитися?

Хоча я не очікую, що ви пройдете цілий курс, намагайтеся бути пізнаючим і цікавим. І, можливо, наступного разу не пропустіть ту статтю про дизайн, яку ви побачили у твіттері freeCodeCamp.

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

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

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

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

Ресурси

  • Дизайн для розробників //thoughtbot.com/upcase/design-for-developers
  • Hack Design //hackdesign.org
  • Дизайн для хакерів //designforhackers.com/
  • Вступ до веб-доступності //webaim.org/intro/

Інші речі, якщо ви тільки починаєте

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

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

То що я повинен навчитися?

Перш за все, налаштуйте редактор коду. Код Visual Studio зараз у моді, але є й інші, які допоможуть вам добре, залежно від ваших уподобань, таких як Atom або Sublime Text. Ви навіть знайдете хмарні IDE, такі як Repl.it, або ви можете просто розпочати роботу з нижчим бар'єром для входу, погравши в CodePen або JSFiddle.

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

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

Для багатьох інструментів, якими ви будете користуватися, доступні графічні інтерфейси, такі як GitKraken, але ви все одно будете обмежені тим, що можете зробити. Найкращим варіантом буде навчитися обіймати термінали на вашому комп'ютері за замовчуванням або завантажити інші варіанти, такі як iterm2 (на мою перевагу) або Xterm.js Бонус: ви будете почувати себе хакером фільмів щоразу, коли будете використовувати його (чи це лише я?)

Ресурси

  • Початок роботи з Visual Studio Code //www.codecademy.com/articles/visual-studio-code
  • Ресурси Git від Github //try.github.io/
  • Дізнайтеся git, розгалужуючи гру //learngitbranching.js.org/
  • Вступ до командного рядка Mac //blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line

Інші речі, якщо ви шукаєте більше

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

Тестування та різні методології

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

Інструменти браузера, такі як Chrome DevTools

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

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

HTTP та способи налагодження запитів на мережевій панелі

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

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

Програмне забезпечення з відкритим кодом та менеджери пакетів

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

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

Що ще?

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

Ти гориш! Стягнувши все це разом

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

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

Звідси ви зможете створювати:

  • Інтерфейс веб-програми, який працює в браузері
  • Служби бекенда, до яких ваш веб-додаток може надсилати запити через кінцеві точки
  • Напишіть сценарій для підключення до інструмента CI / CD для автоматизації процесу збірки та розгортання
  • Бонус: прийняття правильних рішень щодо того, як виглядає ваш інтерфейс, щоб люди могли насправді використовувати його!

Ідіть далі і будуйте! Поділіться з нами вашим шляхом розвитку у Twitter, використовуючи хештег #codejourney. Ми хотіли б почути більше про те, де ви були і що ви побудували або куди ви йдете і що ви хочете побудувати.

Слідуйте за мною, щоб дізнатись більше про Javascript, UX та інші цікаві речі!

  • ? Слідуйте за мною у Twitter
  • ? Підписатися на мій Youtube
  • Підпишіться на мою розсилку