სკრიპტი - გარემოს მომზადება
იმისათვის, რომ ფრონტ-ენდ დეველოპმენტის სწავლა დავიწყოთ, აუცილებელია შევქმნათ შესაბამისი სამუშაო გარემო. დეველოპმენტ გარემო შედგება პროგრამული უზრუნველყოფისა და ხელსაწყოებისგან, რომლებიც გეხმარებათ კოდის წერაში, შემოწმებასა და გაშვებაში. სამუშაო გარემო რამდენიმე ძირითადი კომპონენტისგან შედგება. პირველ რიგში, დაგჭირდებათ ვებ ბრაუზერი, როგორიცაა Google Chrome ან Mozilla Firefox, თუმცა არ ხართ შეზღუდული რომელიმე სხვა ბრაუზერის გამოყენებაშიც. ბრაუზერები იქნება თქვენი ძირითადი ინსტრუმენტი თქვენი ვებ გვერდების პირველადი მიმოხილვისა და ტესტირებისთვის.
შემდეგ უნდა დააინსტალიროთ კოდის რედაქტორი. კოდის რედაქტორები არის სპეციალიზებული პროგრამული უზრუნველყოფა, რომელიც უზრუნველყოფს კომფორტულ და ეფექტურ გარემოს კოდის დასაწერად. პოპულარულ ვარიანტებს შორისაა Visual Studio Code, Sublime Text და Atom. ეს რედაქტორები გვთავაზობენ ფუნქციებს, როგორიცაა სინტაქსის ხაზგასმა, ავტომატური დასრულება და კოდის ფორმატირება. კოდის ედითორებიდან მე გირჩევდით ყველაზე ხშირად გამოყენებად Visual Studio code-ს. ამ რედაქტორში შესაძლებელია ძალიან ბევრი დამატებითი ფლაგინის ან მეორენაირად რომ ვთქვათ ექსთენშენების, დამატებების ინსტალაცია რაც ედითორს ბევრად უფრო მრავალფუნქციურს და მოსახერხებელს ხდის. ეს კი უკეთეს მომხმარებლურ გამოცდილებას გთავაზობთ როგორც დეველოპერს.
უკვე ვიცით რომ დეველოპმენტი სოლო ფლეირ თამაში არ არის და გუნდური სამუშაოა, შესაბამისად მომდევნო თული რაზეც ახლა უფრო მეტს ვისაუბრებ თქვენი პირველი მეგობარია ამ სფეროში. GitHubს ხშირად დეველოპერების სოციალურ ქსელს ვეძახი ხოლმე, ეს არის ჰოსტინგის სერვისი, რომელიც იყენებს Git ვერსიის კონტროლის სისტემას და დეველოპერებს საშუალებას აძლევს შეინახონ კოდი, დაამენეჯმენტონ პროექტი და კოლაბორაციულად იმუშაონ გუნდის წევრებთან ერთად. GitHub იდეალური გადაწყვეტაა თქვენი პორტფოლიოს წარმოსადგენად. თქვენ შეგიძლიათ შექმნათ საჯარო რეპოზიტორიები, უფრო მარტივად რომ ვთქვათ პროექტები დადოთ პოსტებად შემდეგ კი პოტენციურ დამსაქმებლებსა თუ კლიენტებს აჩვენოთ თქვენი ნამუშევრები. გითჰაბი ერთ-ერთი ყველაზე კარგი ადგილია open source პროექტების მოსაძებნად და გადმოსაწერად.
ცოტა უფრო მეტი ვისაუბროთ კოდის ედითორებზეც…კოდის რედაქტორის სწორად არჩევა დიდ გავლენას ახდენს თქვენს დეველოპერულ გამოცდილებაზე. მოდით გადავხედოთ პოპულარული კოდების რედაქტორებს, რომლებსაც იყენებენ წინა დეველოპერები: პირველი და ჩემი ფავორიტი, Visual Studio Code-ია, შემოკლებით მას VS Code-ს ვეძახით. ეს არის Microsoft-ის მიერ შემუშავებული უფასო, open source ედითორი რომელსაც შეგიძლიათ მრავალი მოდული მიაშენოთ მუშაობის გასამარტივებლად პროექტის სპეციფიკიდან და თქვენი სტილიდან გამომდინარე. VS Code გთავაზობთ extension-ების და ინტეგრაციების უზარმაზარ არჩევანს, რაც საშუალებას აძლევს ფრონტ-ენდის დეველოპერებს მოახდინონ გარემოს მორგება მათ საჭიროებებზე.
შემდეგი, ჩვენ გვაქვს Sublime Text, მსუბუქი და ფუნქციურად ასევე მდიდარი კოდის რედაქტორი. Sublime Text ცნობილია თავისი სიჩქარითა და სიმარტივით. მისი ინტერფეისი ბევრად უფრო მარტივია ვიდრე VS code-ის. საბლაიმი გთავაზობთ ყურადღების გადატანის გარეშე წერის გამოცდილებას და ასევე შეგიძლიათ პერსონალიზაციისთვის პაკეტების ჩამატებაც მაგრამ ცოტათი უფრო კომპლექსურია ეს ვიდრე VS codeში. საბლაიმი პოპულარულია დეველოპერებში მისი სისწრაფის და სიმარტივის გამო ამიტომ თუ VS code ის ინტერფეისში ბევრი ღილაკები დაგაბნევთ, შეგიძლიათ საბლაიმით დაიწყოთ მუშაობა.
კიდევ ერთი ცნობილი კოდის რედაქტორი არის Atom, ესეც უფასო რედაქტორია, რომელიც შემუშავებულია GitHub-ის მიერ. მე პირადად ატომის ინტერფეისიც ძალიან მომწონს VS code-ის მსგავსად ისიც საკმაოდ კონფიგურირებადი და ფართოდ გამოყენებადია დეველოპერების საზოგადოებაში. ალბათ VS code რომ არ მენახა პირველი ამას მივეჩვეოდი მეც..
ედითორები რომ შევაჯამოთ ჩემი აზრით ყველა უნდა სცადოთ და რომელთანაც ყველაზე მეტად გაგიმარტივდებათ მუშაობა ის დაიტოვოთ რადგან სამუშაო გარემო ყველა დეველოპერს ინდივიდუალურად აქვს მოწყობილი, ზოგი თეთრზე წერს ზოგიც შავზე. თვალებისთვის ჯობია თუ შავზე იმუშავებთ გრძელვადიან პერიოდში მაგრამ ესეც თქვენივე კომფორტის საკითხია.
Figma
ახლა დიზაინის ხელსაწყოებსაც შევეხოთ. დიზაინი გადამწყვეტ როლს თამაშობს ფრონტ-ენდ დეველოპმენტში და რადგან დიზაინის ხელსაწყოები ჰქვია არ ნიშნავს რომ მხოლოდ დიზაინერები იყენებენ. მიუხედავად იმისა რომ ფრონტ-ენდი მხოლოდ ვიზუალურ ნაწილს დიდი ხანია აღარ მოიცავს, როგორც მომავალ ფრონტ-ენდ დეველოპერებს თქვენი ერთ-ერთი მთავარი უნარი დიზაინ თულებთან კომფორტულად მუშაობა, შესწორებების შეტანა და სისუსტეების აღმოჩენა იქნება. ამისთვის კი უნდა იცნობდეთ იმ ხელსაწყოებს რაშიც ვებ-დიზაინერები მუშაობენ. ამ თულებმა დიდი გზა გაიარა ბოლო 15 წლის განმავლობაში და ალბათ ყველას გაგიგიათ დიზაინის ყველაზე ცნობილი ხელსაწყოები, რომელთა სახელები ბავშვობიდან გესმოდათ. ამ ეტაპზე მაგალითად მოვიყვან ფოტოშოპს და ილუსტრატორს, ადობის ყველაზე წარმატებულ ორ პროდუქტს რომლებსაც გასულ წლებში აქტიურად იყენებდნენ დიზაინერები ვებ-დიზაინის ასაწყობად, ხოლო ფრონტ-ენდ დეველოპერები კი ერთი-ერთში აწყობდნენ შემდეგ ამ ვიზუალს.
ბოლო 8 წლის განმავლობაში ვებ დიზაინი აქტიურად გამოეყო დიზაინის სხვა ნაწილებს და შესაბამისად გაჩნდა საჭიროება გამოყოფილი ხელსაწყობები შექმნილიყო ამ სფეროსთვისაც. ბაზარზე გაჩნდა Adobe XD ხოლო რამდენიმე წლის წინ კონკურენციაში მას აქტიურად ჩაუდგა Figma რომელზეც ახლა ვისაუბრებ. გასულ წელს Adobeმ Figmaც იყიდა მისი პოპულარობიდან გამომდინარე და დღეს ფიგმა ყველაზე გამოყენებადი ხელსაწყოა ვებ დიზაინერებსა და დეველოპერებში.
Figma არის ღრუბლოვანი ანუ cloudbased დიზაინისა და პროტოტიპის ინსტრუმენტი, რომელიც საშუალებას გაძლევთ შექმნათ ლამაზი მომხმარებლის ინტერფეისები. ფიგმაში ყველაზე მეტად კოლაბორაციულ ხელსაწყოებს გამოვყოფდი, სადაც დიზაინერებსა და დეველოპერებს შეუძლიათ შეუფერხებლად იმუშაონ ერთად, ლაივ რეჟიმში დისტანციურად უყურონ ერთმანეთს რას აკეთებენ, რაც ვერსიის კონტროლს ბევრად მარტივს ხოლო სამუშაო გარემოში კომუნიკაციას ბევრად აჩქარებrrrfს და სამუშაო პროცესს ბევრად მოსახერხებელს ხდის.
პირველი, Figma გაძლევთ საშუალებას შექმნათ და გააზიაროთ დიზაინის ფაილები ღრუბელში. ეს აადვილებს დიზაინერებთან და დაინტერესებულ მხარეებთან თანამშრომლობას, გამოხმაურების შეგროვებას და დიზაინების ეფექტურად გამეორებას. Figma გამორიცხავს კომპლექსური ფაილების გაზიარების აუცილებლობას და უზრუნველყოფს ყველას ერთსა და იმავე გვერდზე ყოფნას.
მეორე, Figma უზრუნველყოფს დიზაინის ხელსაწყოებისა და მახასიათებლების მძლავრ კომპლექტს. თქვენ შეგიძლიათ შექმნათ და მოაწყოთ დიზაინის კომპონენტები, გამოიყენოთ სტილები და ეფექტები და შექმნათ ინტერაქტიული პროტოტიპები. Figma-ს ინტუიციური ინტერფეისი და რეალურ დროში კოლაბორაციის შესაძლებლობები მას ფავორიტად აქცევს დიზაინის და დეველოპმენტ გუნდებს შორის საკომუნიკაციოდ.
როგორც დეველოპერებს ფიგმა საშუალებას გაძლევთ მარტივად გაზომოთ და რაც მთავარია დეველოპერ მოუდში უყუროთ დიზაინს, რაც ბევრად გიმარტივებთ დიზაინის აწყობის პროცესს და კომუნიკაციის დროს საგრძნობლად ამცირებს სხვა თულებთან შედარებით.