სადეველოპმენტო ხელსაწყოები კლიენტის მხარეს

ამ სტატიაში განვიხილავთ თანამედროვე ხელსაწყოებს, რომლებიც გამოიყენება ფრონტ-ენდ საიტებისა და ვებ-აპლიკაციების ასაწყობად, რა ნაირსახეობებითა და დეველოპმენტის რა ეტაპებზე გვხდებიან ისინი და როგორ უნდა მოვიძიოთ ინფორმაცია ინდივიდუალური ხელსაწყოების შესახებ.

თანამედროვე ხელსაწყოების ზოგადი მიმოხილვა

ვებზე აპლიკაციების საწერი ტექნოლოგიები დროთა განმავლობაში უფრო დაიხვეწა. მიუხედავად იმისა, რომ ჩვეულებრივი HTML, CSS-სა და JavaScript-ის "ხელით" ჯერ კიდევ მისაღებია, დღესდღეობით არსებობს უსაზღვრო ოდენობის ხელსაწყოები, რომლებიც დეველოპმენტის პროცესს აჩქარებს.

არსებობს ფართოდ მიღებული და დამკვიდრებული ხელსაწყოები, რომლებიც დეველოპერებს შორის წლებია პოპულარობით სარგებლობს. ახალი ხელსაწყოები იწერება და ქვეყნდება ლამის ყოველ დღე. შესაძლოა თავადაც ოდესმე დაგჭირვებოდათ ისედი კოდის დაწერა, რომელიც თქვენი ამოცანის ამოხსნაში დაგეხმარებოდათ, როცა სხვა ხელსაწყოები არ გამოგადგათ.

ერთ პროექტში შეასაძლოა იმდენი ხელასწყო შეგხვდეთ, რომ თავგზა აგერიოთ. გარდა ამისა, ერთი ისეთი ხელასწყოს კონფიგურაციაც, როგორიც webpack-ია, შეიძლება ასობით სტრიქონს მოიცავდეს, რომლიდანაც ნახევარზე მეტს მხოლოდ გამოცდილი ოსტატები გაიგებენ.

ზოგჯერ გამოცდილი დეველოპერებიც კი იჭედებიან, როცა ასეთ ხელასწყოებთან მუშაობენ. ჩვენც კი, ამ საიტის შემქმნელებს, საათები (და დღეებიც!) დაგვიკარგავს ფაიფლაინების გამართვაში, ქომფაილერის კონფიგურაციაში და ა.შ.

წინამდებარე სტატიებში გაგაცნობთ სადეველოპმენტო ხელსაწყოების ფუნდამენტებს, რომლის დახმარებითაც უკვე დამოუკიდებლად შეძლებთ მსგავსი ხელსაწყოების შესახებ ინფორმაციის მოძიებასა და მათ ეფექტურად გამოყენებას. როგორც ყოველთვის - დავიწყოთ მარტივად და ნელ-ნელა უფრო სერიოზულ საკითხებს შევეხოთ.

ხელსაწყოების ეკოსისტემა

თანამედროვე სადეველოპმენტო ხელსაწყოების ეკოსისტემა უზარმაზარია, ამიტომ, უპირველეს ყოვლისა, საჭიროა ზოგადი წარმოდგენა ვიქონიოთ იმაზე, თუ რა ამოცანებს ხსნიან ეს ხელსაწყოები.

გაითვალისწინეთ, რომ ჩვენ განვიხილავთ ყველაზე პოპულარულ ხელსაწყოებს, თუმცა ეს არ ნიშნავს, რომ თქვენ თვალთახედვაში არ იქონიოთ სხვა ალტერნატიული ტექნოლოგიები.

ფართო გაგებით, კლიენტის მხარეს ხელსაწყოები შეგვიძლია მათი დანიშნულების მიხედვით შემდეგ კატეგორიებად დავყოთ:

• გარემო - ხელსაწყოები, რომლებიც გვეხმარებიან სადეველოპმენტო გარემოს შედგენაში, მაგალითად ხელსაწყოების ინსტალაციასა და გაშვებაში.
• უსაფრთხოების ბადე - ხელსაწყოები, რომლებიც უშუალოდ კოდის წერისას არის გამოსადეგი.
• ტრანსფორმაცია - ხელსაწყოები, რომლებიც ჩვენ კოდს გარდაქმნიან, მაგალითად შუამავალ ენას, როგორიც ტაიპსკრიპტია, გარდაქმნიან ბრაუზერისთვის გასაგებ ჯავასკრიპტში.
• პოსტ-დეველოპმენტი - ხელსაწყოები, რომლებიც გამოიყენება კოდის დაწერის შემდეგ, მაგალითად ტესტებისა და გამოქვეყნების ხელსაწყოები.

განვიხილოთ თითოეული მათგანი უფრო დეტალურად.

გარემო

ოპერატიული სისტემა, კოდის ედიტორი, ბრაუზერი - ეს ყველაფერი სადეველოპმენტო გარემოა. დავუშვათ, რომ ამათგან შენთვის ყველაზე კომფორტული ვარიანტები აარჩიე, თუმცა ახალი ხელსაწყოების დაინსტალირებამდე, კიდევ ორი გადაწყვეტილებაა მისაღები:

• სად გაუშვებ ხელსაწყოებს. ხელსაწყოთა უმეტესობას, რომელსაც ლოკალურად ვუშვებთ, ჯავასკრიპტში არის დაწერილი, ამიტომაც კომპიუტერზე გვჭირდება ჯავასკრიპტის ინტერპრეტატორი. ეს უკანასკნელიგამოიყენება კომანდ ლაინის საშუალებით. Node.js არის ინდუსტრიის სტანდარტი, ამიტომ ჩვენ მას გავეცნობით, თუმცა არსებობს მისი ახალი ალტერნატივები, მაგალითად Bun, რომელიც გამოირჩევა თავისი სისწრაფითა და მძლავრი API-ებით.
• როგორ დააინსტალირებ ხელსაწყოებს - ანუ პაკეტების მენეჯერი. ნოუდს მოყვება npm, ამიტომ ამით ვიხელმძღვანელებთ. რა თქმა უნდა, ამისთვისაც არსებობს ალტერნატივები, როგორიცაა Yarn და pnpm. ორივეს გააჩნია თავისი პლიუსები, როგორიცაა სისწრაფე, ქეშირება, პროექტის მართვის საშუალებები და ა.შ.

უსაფრთხოების ბადე

არსებობს ხელსაწყოები, რომლებიც გვეხმარება კოდის უკეთესად წერაში. ასეთი ხელსაწყოები შენ სამუშაო გარემოს უნდა ერგებოდნენ, სწორედ ამიტომ კომპანიებს ხშირად გააჩნიათ წინასწარ გამზადდებული კონფიგურაციები, რათა კომპანიის ყველა დეველოპერმა ერთი და იმავე პროცესებით იხელმძღვანელოს.

უსფაფრთხოების ბადეში იგულისხმება ყველაფერი, რაც დეველოპმენტის პროცესში ხელს უწყობს სტაბილური და სანდო კოდის წარმოებას. ამასთანავე, ასეთი უსაფრთხოების ხელსაწყოები გვეხმარება თავი ავარიდოთ შეცდომებს, ან გამოვასწოროთ არსებული შეცდომები, კოდის ყოველ ჯერზე ხელახლა დაწერის გარეშე.

განვიხილოთ ყველაზე გავრცელებული უსაფრთხოების ხელსაწყოები.

ლინტერები

ლინტერები არის ხელსაწყოები, რომლებიც ამოწმებს ჩვენ კოდს და გვაცნობებს ნებისმიერი ხარვეზის არსებობას, ხარვეზების ტიპსა და კოდში მათ ადგილმდებარეობას. ხშირად შესაძლებელია ლინტერების ისე კონფიგურაცია, რომ მათ არა მხოლოდ ხარვეზები გვაცნობონ, არამედ დააფიქსირონ სპეციფიკური კოდის წერის კონვენციების დარღვევაც, რომლითაც ჩვენი გუნდი შეიძლება ხელმძღვანელობდეს (მაგალითად, კოდი შეიძლება იყენებდეს არასწორი ოდენობის თავისუფალ სივრცეს აბზაცებისთვის, ან არასწორი ტიპის ბრჭყალებს).

ESLint არის ინდუსტრიაში ყველაზე კარგად დამკვიდრებული ჯავასკრიპტის ლინტერი. იგი არის ძალზედ კონფიგურირებადი ხელსაწყო, რომელიც იჭერს პოტენციური სინტაქსის ხარვეზებს და ხელს უწყობს "საუკეთესო პრაქტიკის პატერნებს" მთელი პროექტის ფარგლებში. ზოგიერთ კომპანიას გამოქვეყნებულიც აქვს თავისი ESLint-ის კონფიგურაციები.

რა თქმა უნდა, არსებობს ლინტერები სხვა ენებისთვისაც, მაგალითად StyleLint.

ვერსიის კონტროლი

ვერსიის კონტროლის სისტემები (version control systems, იგივე VCS) გუნდური პროექტების განუყრელი ნაწილია. ტიპური VCS გულისხმობს კოდის ლოკალური ასლის (ვერსიის) ქონას, რომელშიც ცვლილებები შეგვაქვს. შემდეგ ჩვენ "ავწევთ" (push) ადგილობრივ ცვლილებებს კოდის "მთავარ" (master ან main) ასლზე, რომელიც ინახება შორეულ (remote) რეპოზიტორიაში, სადღაც სერვერზე. ჩვეულებრივ, არსებობს მთავარ ასლზე ცვლილებების შეტანის მართვისა და კოორდინაციის საშუალებები, რათა ერთ კოდზე მომუშავე გუნდის წევრებმა თავიანთი ნამუშევარი ერთიმეორეს შემთხვევით ზემოდან არ გადააწერონ.

Git არის დღესდღეობით ყველაზე ფართოდ გამოყენებული ვერსიის კონტროლის სისტემა. იგი ძირითადად კომანდ ლაინიდან გამოიყენება, თუმცა მის გამოსაყენებლად არსებობს გრაფიკული ინტერფეისებიც. როცა ჩვენი კოდი გითის რეპოზიტორაში ინახება, ჩვენ შეგვიძლია იგი ავწიოთ ჩვენი კერძო სერვერის ინსტანციაზე, ან გამოვიყენოთ ვერსიის კონტროლის დაჰოსტილი სერვისები, როგორიცაა GitHub, GitLab ან BitBucket.

კოდის ფორმატერები

კოდის ფორმატერები გარკვეულწილად კავშირში არიან ლინტერებთან, თუმცა ერორების ამოცნობის მაგივრად, მათი დანიშნულებაა კოდის სწორად დაფორმატება პროექტში არსებული სტილის წესების მიხედვით და, იდეალურ შემთხვევაში, ნაპოვნი ხარვეზების გამოსწორება.

Prettier არის კოდის ფორმატერის ყველაზე პოპულარული მაგალითი, რომლითაც ვიხელმზძღვანელებთ შემდეგ თავებში.

ტიპის შემმოწმებელი

ტიპის შემმოწმებელი (type checker) გულისხმობს ხელსაწყოებს, რომლებიც გვეხმარება სანდო კოდის წერაში. ასეთი ხელსაწყო უზრუნველყოფს კოდში სწორი ტიპის მონაცემების გამოყენებას სწორ ადგილას. იგი თავიდან გვარიდებს ძალზედ ხშირ ბაგებს, როგორებიცაა არარსებული თვისების აღება, მოულოდნელი undefined და ა.შ.

TypeScript არის სტანდარტი, როცა საქმე ჯავასკრიპტის ტიპების შემოწმებას ეხება. იგი გვთავაზობს თავისი ტიპების ანოტაციის სინტაქს და, გარკვეულწილად, წარმოადგენს ერთგვარ პროგრამირების ენას, ამიტომაც მას ცალკე მოდული ეთმობა.

ტრანსფორმაცია

ვებ აპლიკაციის დეველოპმენტის ციკლის ამ კონკრეტულ ფაზაზე საშუალება გვაქვს, გამოვიყენოთ "მომავლის კოდი" (როგორიცაა უახლესი CSS-ისა ან JavaScript-ის ფუნქციონალი, რომელსაც ჯერ არ აქვს ბრაუზერის მხარდაჭერა) ან ისეთი კოდი, რომელიც მთლიანად სხვა ენაზეა დაწერილი, მაგალითად TypeScript-ზე. ტრანსფორმაციის ხელსაწყოები აგენერირებენ ბრაუზერისთვის მუშა კოდს, რომელიც უშუალოდ აპლიკაციას ამუშავებს.

ზოგადად, ვებ დეველოპმენტი განიხილება სამ ენაზე: HTML, CSS და JavaScript. ტრანსფორმაციის ხელსაწყოები ყველა მათგანისთვის არსებობს. ტრანსფორმაციას აქვს სამი ძირითადი სარგებელი:

1. შესაძლებლობა, რომ დავწეროთ კოდი ენის უახლესი ფუნქციონალებით და გარდავქმნათ ის კოდზე, რომელიც მუშაობს ყოველდღიურ მოწყობილობებზე. მაგალითად, შეიძლება გვინდოდეს დავწეროთ ჯავასკრიპტი უახლესი ენის ფუნქციონალით, მაგრამ საჭიროა, რომ ფროდაქშენის კოდმა იმუშაოს ძველ ბრაუზერებზეც, რომლებშიც ამ უახლეს იფუნქციონალის მხარდაჭერა არ არის. ასეთი შემთხვევისთვის არსებობს ხალსაწყოები, როგორიცაა:
   • Babel: ჯავასკრიპტის ქომფაილერი რომელიც დეველოპერებს აძლევს საშუალებას დაწერონ კოდი უახლესი ფუნქციონალით და დააკონვერტირონ ძველმოდურ ჯავასკრიპტში, რომელიც ბრაუზერის ძველ ვერსიებსაც ესმით. დეველოპერებს ასევე საშუალება აქვთ, Babel-ისთვის ფლაგინები დაწერონ.
   • PostCSS: მუშაობს Babel-ის მსგავსად, ოღონდ CSS-ისთვის. თუ CSS-ში ისეთ რაღაცას ვაკეთებთ, რაც ძალზედ ახალია და არ მოიძებნება CSS-ის ძველ ვერსიებში, PostCSS დააინსტალირებს ჯავასკრიპტის polyfill-ს, რომ ემულაცია გაუკეთოს CSS-ის ეფექტებს.
2. საშუალება, რომ კოდი დავწეროთ საერთოდ სხვა ენაზე და ის გარდავქმნათ ვებისთვის მორგებულ ენაზე. მაგალითად:
   • Sass/SCSS: ეს ენა საშუალებას გვაძლევს, გამოვიყენოთ ცვლადები, დანესტილი წესები, მიქსინები, ფუნქციები და ბევრი სხვა ფუნქციონალი, რომელთაგანაც ზოგი CSS-ში ხელმისაწვდომია, თუმცა ზოგი - არა.
   • TypeScript: ჯავასკრიპტზე დაშენებული ენა, რომელიც მრავალ ახალ ფუნქციონალს გვთავაზობს. ტაიპსკრიპტის ქომფაილერი გარდაქმნის ტაიპსკრიპტს ჯავასკრიპტში, რათა მუშა აპლიკაცია შეიქმნას.
   • ფრეიმვორქები, როგორიცაა Angular, React, Vue: ფრეიმვორქები უამრავ ფუნქციონალს გვთავაზობს და საშუალებას გვაძლებს რომ გამოვიყენოთ მორეგბული სინტაქსი, რომელიც უბრალო ჯავასკრიპტზეა დაშენებული. უკანა ფონზე ფრეივორქის ჯავასკრიპტის კოდი ინტერპრეტაციას უკეთებს ამ მორგებულ სინტაქსს და მისგან საბოლოოდ ქმნის მუშა ვებ აპლიკაციას.
3. ოპტიმიზაცია. ამას უნზრუნველყოფებ ბანდლერები (bundlers), რომლებიც ჩვენს კოდს ამზადებენ ფროდაქშენისთვის, მაგალითად "ჩამობერტყვით" (tree-shaking), რათა კოდის ის ნაწილები აღმოჩდეს საბოლოო შედეგში, რომლებსაც მართლა ვიყენებთ, ან "მინიფიკაცია", კოდში არსებული ვაითსფეისების მოსაშორებლად, რათა სერვერზე ფროდაქშენის კოდი მინიმალური ზომის იყოს. ბანდლერების მაგალითებია:
   • Webpack არის ყველაზე პოპულარული ბანდლერი, რომელსაც გააჩნია უამრავი ფლაგინი და მძლავრი კონფიგურაციის სისტემა. მიუხედავად ამისა, ცნობილია, რომ ის მოსაწყობად საკმაოდ კომპლექსურია და უფრო ნელი, ვიდრე სხვა თანამედროვე ალტერნატივები.
   • Vite არის უფრო თანამედროვე ხელსაწყო, რომელიც ცნობილია თავისით სიჩქარით, სიმარტივითა და ფუნქციონალის სიმრავლით.

პოსტ-დეველოპმენტი

პოსტ-დეველოპმენტის ხელსაწყოები უზრუნველყოფენ, რომ პროგრამები მოხვდნენ ვებზე და გააგრძელონ მუშაობა. ეს გულისხმობს ათპლიკაციის სერვერზე განთავსებას, ტესტირების ფრეიმვორქებს, აუტიტის ხელსაწყოებს და ა.შ.

ეს დეველოპმენტის ის ფაზაა, რომელშიც ყველაზე ნაკლებად გვინდა აქტიურად ჩარევა, რადგან ის ერთხელ უნდა გაიმართოს და თავისით, ავტომატურად მუშაობდეს, ხოლო რაიმე ხარვეზის შემთხვევაში - გვაცნობონ რა მოხდა.

ტესტირების ხელსაწყოები

ასეთი ხელსაწყოები წარმოადგენენ ერთგვარ პროგრამებს, რომლებიც ავტომატურად ამოწმებენ, სწორად მუშაობს თუ არა ჩვენი ჯოდი და ხარვეზის შემთხვევაში შეგვაჩერებს, სანამ დეველოპმენტის შემდეგ ფაზაზე გადავალთ (მაგალითად საშუალებას არ მოგვცემს, რომ ცვლილებები ავწიოთ GitHub-ის რეპოზიტორიაში). ასეთი ხელსაწყოები მოიცავს არა მხოლოდ ლინტერებს, არამედ უფრო დახვეწილ პროცედურებსაც, როგორიცაა იუნით ტესტები, რომლებიც ამოწმებენ კოდის ნაწილებს, რათა მათ ისე იმუშაონ, როგორც საჭიროა.

• ტესტების საწერი ფრეიმვორქების მაგალითებია Jest, Mocha და Jasmine.
• ავტომატიზირებული ტესტების გაშვებისა და შეტყობინებების სისტემებია Jenkns, GitHub Actions, Circle CI და სხვები.

გამოქვეყნების ხელსაწყოები

გამოქვეყნების ხელსაწყოები (deplyoment tools) საშუალებას გვაძლევს რომ გამოვაქვეყნოთ ვებსაიტები სერვერებზე. ეს შეიძლება იყოს სტატიკური და დინამიკური საიტებიც, რომლებიც ტესტირების სისტემებთან ერთად მუშაობენ. მაგალითად, ტიპური თულჩეინი ელოდება, როდის ავწევთ ცვლილებებს შორეულ რეპოზიტორიაში და საპასუხოდ გაუშვებს ტესტებს, დარწმუნდება რომ ყველაფერი რიგზეა და შემდეგ ავტომატურად გამოაქვეყნებს საიტს იქ, სადაც ახალ ცვლილებებს ყველა მომხმარებელი ნახავს.

GitHub Pages არის GitHub-ზე ინტეგრირებული უფასო სერვისი (საჯარე რეპოზიტორიებისთვის). სხვა სერვისები, როგორიცაა Netlify და Vercel ასევე გვთავაზობენ უფასო სერვისებს, რომლებიც მოქნილად აინტეგრირებენ გამოქვეყნების workflow-ს რეპოზიტორიებთან.

სხვა

პოსტ-დეველოიპმრნტის ეტაპზე არსებობს სხვა ტიპის ხელსაწყოებიც, როგორიცაა Code Climate კოდის ხარისხის გასაზომად, Webhint ბრაუზერის ფლაგინი აპლიკაციის მუშაობის გასაანალიზებლად თუ ბრაუზერებს შორის ფუნციონალის გამართულობის შესამოწმებალად, GitHub-ის ბოტები უფრო მძლავრი ფუნქციონალისთვის და ა.შ.

რჩევები

როგორც ხედავთ, დეველოპმენტის ციკლში ხელსაწყოებს თავიანთი თანმიმდევრობა გააჩნიათ, თუმცა არ არის აუცილებელი ყველა მათგანის გამოყენება ვებსაიტის გამოსაქვეყნებლად. სიმართლე ითქვას, _არცერთი მათგანი არ გჭირდებათ. მიუხედავად ამისა, რამდენიმე ზემოთ ხსენებიული ხელსაწყოს თქვენს პროექტში ჩამატება გააუმჯობესებს ე.წ "დეველოპმენტის გამოცდილებას" (ანუ ნაკლებს გაწვალებთ) და სავარაუდოდ კოდის ხარისხსაც.

ახალ დეველოპერს დრო სჭირდება რომ მიეჩვიოს ასეთი ხელსაწყოების კომპლექსურობას. ერთ-ერთ ყველაზე ცნობილ ხელსაწყოს, webpack-ს, საკმაოდ ცუდი რეპუტაცია აქვს, რადგან მასზე მუშაობა საკმაოდ რთულია, მაგრამ ბოლო გამოშვებებში შეიმჩნევა მცდელობები, რომ გაამარტივონ მისი გამოყენება და შეამცირონ საჭირო კონფიგურაციები სრულ მინიმუმამდე.

რა თქმა უნდა, არც ერთი მიდგომა არ გვაძლევს წარმატების გარანტიას, როცა საქმე ასეთ ხელსაწყოებს ეხება, თუმცა როცა თქვენ საკმარის გამოცდილებას შეიძენთ, იპოვით იმ პროცესებსა და ხერხებს, რომლებიც თქვენ გუნდსა და პროექტებს ყველაზე კარგად ერგება. როგორც კი პროცესის მოუხერხებელ ასპექტებს მოაგვარებთ, ხელსაწყოები უბრალოდ ისეთი რაღაცები იქნება, რომლებსაც უბრალოდ დაივიწყებთ და ისინი თავისით იმუშავებენ.

როგორ ავარჩიოთ ხელსაწყოები და მოვიძიოთ დახმარება

ხელსაწყოთა უმეტესობა ერთმანეთისგან იზოლილებურად გამოიცემა, ამიტომ მათ შესახებ ინფორმაცია სხვადასხვა ადგილსა და ფორმატში გვხვდება. აქედან გამომდინარე, შეაძლოა რთული იყოს, გარკვეული ხელსაწყოს შერჩევა ან მის შესახებ დახმარების მოძიება.

თქვენ დაგჭირდებათ შემდეგი რაღაცები:

• გამოცდილი მასწავლებლები, მენტორები ან უბრალოდ კოლეგები და თქვენნაირი მოსწავლეები, რომლებსაც უკვე ამოუხსნიათ ის ამოცანა, რომლის წინაშეც თქვენ ხართ და შეუძლიათ რჩევის მოცემა.
• კონკრეტული გამოსადეგი ადგილი ძებნისთვის. ზოგადად ვებში ხელსაწყოების მოძებნა მაშინ არის გამოსადეგი, როცა უკვე იცი შენთვის საჭირო ხელსაწყოს სახელი.
  • თუ იყენებთ npm პაკეტების მენეჯერს, კარგი აზრია npm-ის ვებსაიტზე გადასვლა და სასუველი ხელსაწყოს ტიპის მოძებნა. მაგალითად, თუ თარიღის დასაფორმატებელ ბიბლიოთეკას ეძებთ, დასერჩავთ "date-ს", თუ ეძებთ კოდის ფორმატერს, დასერჩავთ "formatter-ს" და ა.შ. ყურადღება მიაქციეთ ბიბლიოთეკის პოპულარობას, ხარისხს, პერფორმანსის ქულებსა და განახლების ბოლო თარიღს. ასევე შეამოწმეთ რამდენად კარგი დოკუმენტაცია გააჩნია ხელსაწყოს და საერთოდ გადაჭრის თუ არა ის თქვენ ამოცანას.
  • თუ ეძებთ ფლაგინს რომლითაც ხელსაწყოს ფუნქციონალს დააინტეგრირებთ კოდის ედიტორში, მოძებნეთ თქვენი ედიტორის ფლაგინების გვერდზე - მაგალითად, VS Code-ის ფლაგინების გვერდზე. ხელსაწყო შეარჩიეთ ისეთი კრიტერიუმებით, როგორიცაა პოპულარობა, შეფასება და ა.შ.
• დეველოპმენტის ფორუმები გამოსადეგია შეკითხვების დასასვამად და საჭირო ხელსაწყოს შესარჩევად, მაგალითად MDN Learn Discourse ან Stack Overflow.

ხელსაწყოს არჩევის შემდეგ საჭიროა პროექტის გვერდის ნახვა. ეს შეიძლება იყოს მთლიანი ვებსაიტი ან უბრალო README ფაილი პტოექტის რეპოზიტორიაში. დოკუმენტაციები შეიძლება საკმაოდ მარტივი და ინტუიტიური იყოს, თუმცა არსებობს ძალზედ ტექნიკური და აკადემიკური დოკუმენტაციებიც, რომლებიც სწავლის პროცესში არ გამოგადგებათ.

შესაძლოა ხელსაწყოს ასათვისებლად მიმართოთ ერთგვარ გაკვეთილებს ან ტუტორიალებს. მაგალითად, კარგი და ცნობილი ვებსაიტებია CSS Tricks, Dev, freeCodeCamp და Smashing Magazine - ისინი კონკრეტულად ვებ დეველოპმენტის ინდუსტრიაზე არიან მორგებულნი.

არ არის გამორიცხული, რომ რამდენიმე ხელსაწყოს გაეცნოთ, რათა ერთი და საუკეთესო შეარჩიოთ თქვენი ამოცანისთვის. რაც უფრო მეტ გამოცდილებას დააგროვებთ, მით უფრო მარტივად შეძლებთ სამომავლოდ ხელსაწყოების შესახებ გადაწყვეტილებების მიღებას.