Val Do-ს ბლოგი

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

ლინუქსის შორთქათები პროგრამირებისთვის

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

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

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

ღილაკის კომბინაცია	რა ფუნქციას ასრულებს
`Alt+Tab`	აქტიურ ფანჯრებს შორის ნავიგაცია
`Super+H`	აქტიური ფანჯრის ჩაკეცვა
`Ctrl+W`	აქტირუ ფანჯრის გათიშვა
`Super+Shift+left arrow`	აქტიური ფანჯრის მარცხნივ ეკრანზე გადატანა
`Super+Shift+right arrow`	აქტიური ფანჯრის მარჯვნივ ეკრანზე გადატანა
`Alt+Esc`	აქტიურ ფანჯრებს შორის გადართვა პირდაპირი მეთოდით
`Ctrl+Super+D`	ყველა აქტიური ფანჯრის დამალვა
`Super+up arrow`	აქტიური ფანჯრის მთელ ეკრანზე გადიდება
`Super+left arrow`	მარცხნივ გახსნა სპლიტ ფანჯრის
`Super+right arrow`	მარჯვნივ გახსნა სპლიტ ფანჯრის
`Super+L`	ეკრანის დაბლოკვა
`Super+A`	ყველა აპლიკაციის ნახვა
`Ctrl+Alt+T`	ტერმინალის გახსნა
`Super+V`	შეტყობინებების პანელის გახსნა

Super ღილაკი წარმოადგენს კლავიატურაზე ე.წ. Win (Windows) ღილაკს

Firefox-ის ღილაკების კომბინაციები

დღევანელ ბლოგში განვიხილავთ mozilla firefox-ის ღილაკების კომბინაციებს, რომლებიც გაგვიმარტივებენ ვებ-დეველოპმენტს და პროცესს მინიმუმ 10-ჯერ უფრო სწრაფს გახდიან.

🔴 მნიშვნელოვანი ინფორმაცია ‼️

ქვემოთ მოცემულ ბრძანებებში command ღილაკი Windows და Linux სისტემებზე ნიშნავს ctrl ღილაკს

დეველოპერის ხელსაწყოები

ბრძანება	ღილაკის კომბინაცია
დეველოპერის პანელი (inspect element)	`command + alt + I`
ვებ კონსოლი (web console)	`command + alt + K`
ინსპექტორი (inspector)	`command + alt + C`
სქრინშოტის გადაღება	`command + shift + S`
ქსელის პანელი (network)	`command + alt + E`

სხვა და სხვა

ბრძანება	ღილაკის კომბინაცია
ფოკუსირება ULR-ის ბარზე	`command + L`
მთელ ეკრანზე გადიდება/დაპატარავება	`command + shift + F`
ძიება გვერდზე	`command + F`
საძიებო სისტემის ფოკუსი და ძიება	`command + K`

ფანჯრები და ტაბები

ბრძანება	ღილაკის კომბინაცია
ჩანართის დახუვა (tab) დახურვა	`command + W`
ფანჯრის დახურვა	`command + shift + W`
ბრაუზერის დახურვა	`command + Q`
ახალი ჩანართის გახსნა	`command + T`
ახალი ფანჯრის გახსნა	`command + N`
ახალი პივატული ფანჯრის გახსნა	`command + shift + P`
ბოლი გათიშული ჩანართის აღდგენა	`command + shift + T`
ბოლო გათიშული ფანჯრის აღდგენა	`command + shift + N`
აქტიური ჩანართის გადართვა მარჯვნივ 1-ით	`command + shift + [`
აქტიური ჩანართის გადართვა მარცხნივ 1-ით	`command + shift + ]`

რა არის web safe ფონტები HTML, CSS-ში

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

დღევანდელ ბლოგში და ასევე ვიდეოში, რომელიც YouTube-ზე უკვე დევს ვისაბუბრებ web safe და browser safe-ფონტებზე.

არსებობენ სტანდარტული ფონტები, რომლებიც მოყვება ნებისმიერ ოპერაციულ სისტემას და არ აქვს მნიშვნელობა თუ რომელი სისიტემაა ის, იქნება ეს Windows, Mac os თუ Linux-ის ნებისმიერი დისტრიბუცია.

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

რაც შეეხება მეორე ვერსიას, web safe ფონტები ასევე გამოიყენება იმ შემთხვევისთვის თუ ჩვენი ე.წ. (custom) ფონტი სწორად არ ჩაიტვირთება, ამ შემთხვევაში მოერე ვერსიად ასევე შეიძლება გვქონდეს web safe ფონტი.

როგორი კომპიუტერი მჭირდება პროგრამირების დასაწყებად?

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

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

რა მოთხოვნებს უნდა აკმაყოფილებდეს კომპიუტერი?

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

ბრაუზერი (chrome, firefox, opera...)
ტექსტური რედაქტორი ან ე.წ. IDE (VS Code, Web Storm, Sublime text, Vim/NeoVim...)
Git Bash

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

რა მინიმალური მონაცემები უნდა ქონდეს კომპიუტერს?

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

მაგალითისთვის, რომ გავუშვათ chrome-ის ბრაუზერი, როგორც მათ საიტზე ვკითხულობთ, აუცილებელია მინიმუმ კომპიუტერის პროცესორს ქონდეს 2GHz-ზე მეტი სიხშირე, ხოლო რაც შეეხება ოპერატიულ მეხსიერებას, სასურველია იყოს მინიმუმ 4GB და მყარი დისკის მოცულობა იყოს მინიმუმ 256GB

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

რომელი ოპერაციული სისტემა უნდა მქონდეს?

ვებ პროგრამირების სწავლის დაწყებისას ამას არ აქვს მნიშვნელობა, მთავარია თქვენ სად გრძნობთ თავს კომფორტულად იქნება ეს Windows, Mac OS თუ Linux, მაგრამ, მე, ჩემი გამოცდილებით, Linux-ს და Mac OS-ს მივანიჭებდი უპირატესობას, რადგანაც ისინი დაშენებულია UNIX-ზე

საიდან დავიწყოთ ვებ პროგრამირების შესწავლა?

ვებ პროგრამირების შესასწავლად უამრავი ინგლისურენოვანი ინტერნეტ რესურსი არსებობს, მაგრამ თუ თქვენთვის ინგლისური ბარიერს წარმოადგენს, შეგიძლიათ val-do.com-ზე ან Val Do-ს YouTube არხზე შეისწავლოთ 0-დან, საიტზე მოცემულია შემდეგი უფასო კურსები:

რა რჩევებს მივცემდი ჩემს თავს პროგრამირების სწავლის დაწყებამდე?

მოგეხსენებათ პროგრამირების შესწავლა არც ისე მარტივი საქმეა და ის ძალიან დიდ შრომას და დროს მოითხოვს.

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

გამოყავი სწავლისთვის სპეციალური საათები

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

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

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

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

გაიცანი შენი კოდის ედითორი

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

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

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

დაიწყეთ საფუძვლებით

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

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

შეისწავლე უცხო ენა (ინგლისური)

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

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

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

ისწავლე დოკუმენტაციასთან მუშაობა

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

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

დაიწყეთ ყველაზე მარტივი პროექტებით

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

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

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

ისწავლე google-თან მუშაობა

პროგრამისტის და არა მარტო პროგრამისტის ერთერთი მთავარი უნარი არის საჭირო ინფორმაციის მოძიება.

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

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

შეურეთდი პროგრამისტების საზოგადოებებს

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

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

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

tmux ძირითადი ღილაკის კონფიგურაციები

მოცემულ ბლოგში განვიხილავთ tmux-ის ღილაკების კომბინაციებს, რომელიც საჭიროა ყოველდღიური გამოყენებისთვის

tmux-ის რეპოზიტორი გითზე

tmux-ის სესიების კომბინაციები (sessions)

ღილაკის კობმინაცია	რას აკეთებს?
`tmux`	ხსნის ახალ tmux-ის სესიას
`ctrl+b` `s`	აქტიური სესიების ჩამონათვალი
`ctrl+b` `$`	სესიის სახელის შეცვლა
`ctrl+b` `d`	სესსიდან გამოსვლა (detach)
`ctrl+b` `(`	წინა სესიაზე გადასვლა
`ctrl+b` `)`	შემდეგ სესიაზე გადასვლა

tmux-ის ფანჯრების კომბინაციები (windows)

ღილაკის კობმინაცია	რას აკეთებს?
`ctrl+b` `c`	ახალი ფანჯრის შექმნა
`ctrl+b` `,`	ფანჯრის სახელის გადარქმევა
`ctrl+b` `&`	ფანჯრის დახურვა
`ctrl+b` `w`	აქტიური ფანჯრების სია
`ctrl+b` `p`	წინა ფანჯრის აქტივაცია
`ctrl+b` `n`	შემდეგი ფანჯრის აქტივაცია
`ctrl+b` `0...9`	ფანჯრის აქტივაცია ინდექსის მიხედვით
`ctrl+b` `l`	ბოლო აქტიური ფანჯრის გადართვა გადმოვრთვა ე.წ. (toggle)

tmux-ის Pane-ების კომბინაციები (split screen)

ღილაკის კომბინაცია	რას აკეთებს?
`ctrl+b` `%`	ეკრანის ჰორიზონტალურად გაყოფა
`ctrl+b` `"`	ეკრანის ვერტიკალურად გაყოფა
`ctrl+b` `{`	კურსორის გადართვა მარცნივ
`ctrl+b` `}`	კურსორის გადართვა მარჯვნივ
`ctrl+b` `up-arrow`	კურსორის გადართვა მაღლა (ისრით)
`ctrl+b` `down-arrow`	კურსორის გადართვა დაბლა (ისრით)
`ctrl+b` `right-arrow`	კურსორის გადართვა მარჯვნივ (ისრით)
`ctrl+b` `left-arrow`	კურსორის გადართვა მარცხნივ (ისრით)
`ctrl+b` `q`	pane-ების რაოდენობის გამოსახვა
`ctrl+b` `x`	pane-ის გათიშვა

vim-ის insert რეჟიმის ღილაკების კომბინაციები

მოცემულ ბლოგში განვიხილავ ჩემს მიერ ყველაზე ხშირად გამოყენებულ ღილაკების კომბინაცეიბს vim-ში

ძიების კომბინაციები

კომბინაცია	აღწერა
`/`	ძიების დაწყება
`%s/მოსაძებნი_სიტყვა/ჩასანაცვლებელი_სიტყვა/gc`	სიტყვის მოძებნა ფაილში და ჩანაცვლება დადასტურებით. დასადასტურებლად აუცილებელია y ან n

კოპირება ჩაკოპირება

კომბინაცია	აღწერა
`"+p`	clipboard-იდან ჩასმა (paste)
`"+y`	clipboard-ზე დაკოპირება (copy to clipboard)

insert mode-ის ბრძანებები

კომბნაცია	აღწერა
`i`	აქტივაცია კურსორამდე
`I`	აქტივაცია ხაზის დასაწყისში
`a`	აქტივაცია კურსორის შემდეგ
`A`	აქტივაცია ხაზის ბოლოში
`O`	აქტივაცია ხაზის ზემოთ
`o`	აქტივაცია ხაზის ქვემოთ
`ea`	აქტივაცია სიტყვის ბოლოში
`ctrl+h`	სიმბოლოს წაშლა კურსორამდე, როდესაც უკვე აქტიურია insert რეჟიმი
`ctrl+w`	სიტყვის წაშლა კურსორამდე, როდესაც უკვე აქტიურია insert რეჟიმი
`ctrl+j`	ახალი ხაზის დაწყება, როდესაც უკვე აქტიურია insert რეჟიმი
`ctrl+t`	ხაზის მარჯვნივ წანაცვლება, როდესაც უკვე აქტიურია insert რეჟიმი
`ctrl+d`	ხაზის მარცხნივ წანაცვლება, როდესაც უკვე აქტიურია insert რეჟიმი
`Esc`	insert რეჟიმიდან გამოსვლა

მეტა სერვისი Angular აპლიკაციისთვის

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

index.html-ის მომზადება

<!doctype html>
<html lang="ka">

<head>
  <meta charset="utf-8">
  <title>თქვენი საიტის სათაური</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- fav icon -->
  <link rel="icon" type="image/png" href="./assets/icons/logo.png">
  <!-- open graph meta tags -->
  <meta name="og:type" content="website" />
  <meta name="og:title" content="" />
  <meta name="og:description" content="" />
  <meta name="og:url" content="" />
  <meta name="og:image" content="" />
  <meta name="image" content="" />
  <!-- twitter meta tags -->
  <meta name="twitter:card" content="" />
  <meta name="twitter:site" content="" />
  <meta name="twitter:creator" content="" />
  <meta name="twitter:description" content="" />
  <meta name="twitter:url" content="" />
  <meta name="twitter:image" content="" />
</head>
...

როგორც ნახეთ index.html-ში წინასწარ გავამზადეთ ყველა მეტა თეგი content="" ცარიელი ატრიბუტით, რათა მომავალში აღარ დაგვჭირდეს ანგულარის აპლიკაციიდან ამ თეგების გენერაცია.

გენერაციის მაგივრად ჩვენ უბრალოდ განვაახლებთ მათ შიგთავსს კონკრეტული გვერდებიდან გამომდინარე.

შემდეგ ეტაპზე ვაგენერირებთ meta სერვისს

ng g s meta

სერვისის გენერაციის შემდეგ უკვე შეგიძლიათ გამოიყენოთ ჩემი კოდის ნიმუში

meta.service.ts

import { Injectable } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class MetaService {

  constructor(
    private _title: Title,
    private _meta: Meta,
    private _router: Router
  ) {
  }

  update(
    title: string,
    description: any,
    img?: string
  ) {
    /* page title */
    this._title.setTitle(title);
    /* meta tags */
    this._meta.updateTag({name: 'description', content: `${description.replace(/(<([^>]+)>)/gi, "").slice(0, 145)}...`});
    this._meta.updateTag({name: 'author', content: `Val Do`});
    /* open graph */
    this._meta.updateTag({ name: 'og:title', content: title });
    this._meta.updateTag({ name: 'og:description', content: `${description.replace(/(<([^>]+)>)/gi, "").slice(0, 145)}...` });
    this._meta.updateTag({ name: 'og:url', content:`${environment.baseUrl}/${this._router.url.slice(1)}` });
    this._meta.updateTag({ name: 'og:image', content: img || `${environment.baseUrl}/assets/social.jpg` });
    this._meta.updateTag({ name: 'image', property: 'og:image', content: img || `${environment.baseUrl}/assets/social.jpg` });
    /* twitter */
    this._meta.updateTag({ name: 'twitter:card', content: 'summary_large_image' });
    this._meta.updateTag({ name: 'twitter:site', content: '@va1_do' });
    this._meta.updateTag({ name: 'twitter:creator', content: '@va1_do' });
    this._meta.updateTag({ name: 'twitter:title', content: title });
    this._meta.updateTag({ name: 'twitter:description', content: `${description.replace(/(<([^>]+)>)/gi, "").slice(0, 145)}...` });
    this._meta.updateTag({ name: 'twitter:url', content:`${environment.baseUrl}/${this._router.url.slice(1)}` });
    this._meta.updateTag({ name: 'twitter:image', content: img ||`${environment.baseUrl}/assets/social.jpg` });
  }
}

meta.service.ts ფაილში გვაქვს 1 მეთოდი update(title: string, description: any, img?:string), მოცემულ მეთოდს გადმოეცემა 2 ძირითადი და 1 არა ძირითადი პარამეტრი ესენია:

title - გვერდის სათაური
description - გვერდის აღწერა
img? - გვერდის სურათი

როგორც ზემოთ ავღნიშნე img პარამეტრი არაა საჭირო პარამეტრი, იმ შემთხვევაში თუ პარამეტრი არ გადმოეცემა შეგიძლიათ მიუთითოთ რაიმე სტანდარტული სურათი თქვენი აპლიკაციისთვის, რომელიც იქნება პროექტის assets/ დირექტორიაში

როგორც მეტა სერვისიდან ჩანს ვიყენებ javascript-ის .replace() მეთოდს, რომელსაც გადავცემ regex-ს რომელიც უზრუნველყოფს თეგების სინტაქსის ამოღებას კონკრეტული ტექსტიდან, იმ შემთხვევაში თუ თქვენ description-პარამეტრში გადმოეცით ტექსტი, რომელიც შეიცავს html თეგებს, ასევე ვიყენებ .slice(0, 145) მეთოდს რომელიც გადმოცემული ტექსტიდან ამოიღებს მხოლოდ მაქსიმუმ 145 სიმბოლოს, რაც ზოგადად description ტექსტის მაქსიმალური სიმბოლოების რაოდენობაა.

app.component.ts

გამოყენების მაგალითი

import { Component, OnInit } from '@angular/core';
import { MetaService } from './meta.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  constructor(
    private _metaService: MetaService
  ) {}

  ngOnInit(): void {
    this._metaService.update(
      'თქვენი გვერდის სათაური',
      'თქვენი გვერდის აღწერა',
      'თქვენი გვერდის ფოტოს მისამართი path/img'
    )
  }

}

პ.ს.

იმისთვის, რომ meta სერვისმა იმუშაოს სოციალურ ქსელებში აუცილებელია თქვენი პალიკაცია იყენებდეს Angular universal-ს ანუ server side rendering-ს

Google rich result-ის კომპონენტი Angular აპლიკაციისთვის

როგორც იცით, იმისთვის, რომ გუგლის საძიებო სისტემაში ჩვენი გვერდი ლამაზად მეტად ინფორმირებულად გამოჩნდეს საჭიროა schema.org-ის json-ld-ის გამოყენება.

სტრუქტურის ნიმუშების სანახავად შეგიძლიათ გადახვიდეთ მოცემულ ბმულზე

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

პირველ რიგში დავაგენერიროთ კომპონენტი

ng g c json-ld

კომპონენტის გენერაციის შემდეგ, ჩვენი კომპონენტი უნდა გამოიყურებოდეს შემდეგნაირად

json-ld.component.ts

import { DOCUMENT } from '@angular/common';
import { AfterViewInit, Component, Inject, Input, Renderer2 } from '@angular/core';

@Component({
  selector: 'app-json-ld',
  templateUrl: './json-ld.component.html',
  styleUrls: ['./json-ld.component.scss']
})
export class JsonLdComponent implements AfterViewInit {

  @Input() data!: any;

  constructor(
    @Inject(DOCUMENT) private _document: Document,
    private _renderer2: Renderer2
  ) { }

  ngAfterViewInit(): void {
    const jsonLdElement: HTMLElement = this._document.querySelector('[type="application/ld+json"]') as HTMLElement;

    if (!jsonLdElement) {
      const script = this._renderer2.createElement('script');
      script.type = `application/ld+json`;
      script.text = JSON.stringify(this.data);
      this._renderer2.appendChild(this._document.head, script);
      return;
    }

    jsonLdElement.innerText = JSON.stringify(this.data);
  }

}

მას შემდეგ რაც კომპონენტს ავაწყობთ ჩვენ უკვე შეგვიძლია მას @Input() დეკორატორის დახმარებით სასურველი კომპონენტიდან გადმოვაწოდოთ ჩვენთვის სასურველი სტრუქტურის json.

მაგალითად წარმოვიდგინოთ, რომ გვაქვს ონლაინ მაღაზია და გვინდა json-ld-ის ინიციალიზაცია მაღაზიის პროდუქტებზე

product.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable, tap } from 'rxjs';
import { ProductService } from '../services/product.service';

interface Product {
  title: string;
  description: string;
  images: string[];
  price: string;
}

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.scss']
})
export class ProductComponent implements OnInit {

  product$!: Observable<Product>;
  schema!: any;

  constructor(
    private _productService: ProductService
  ) { }

  ngOnInit(): void {
    this.product$ = this._productService.getProduct().pipe(
      tap(product => {
        this.schema = {
          "@context": "https://schema.org/",
          "@type": "Product",
          "name": product.title,
          "img": product.images,
          "description": product.descr.replace(/(<([^>]+)>)/gi, "").slice(0, 145),
          "sku": product.product_id,
          "offers": {
            "@type": "AggregateOffer",
            "offerCount": product.quantity,
            "lowPrice": product.price,
            "highPrice": product.price,
            "priceCurrency": "GEL",
          }
        }
      })
    );
  }

}

product.component.html

<ng-container *ngIf="(product$|async) as product">
    ... თქვენი კოდი
    <app-json-ld [data]="schema"></app-json-ld>
</ng-container>

HTML CSS-ის ინტენსიური კურსი დამწყებთათვის

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

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

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

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

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

*კურსის დასაწყებად აუცილებელია დარეგისტრირდეს მინიმუმ 10 სტუდენტი.

👉🏻 რეგისტრაცია

🤔 გაქვს კითხვები? 👉🏻 მომწერე აქ

*იმ შემთხვევაში, თუ კურსი არ მოგეწონებათ გადახდილი თანხა მთლიანად აგინაზღაურდებათ

რა მოხდება კურსის დასრულების შემდეგ?

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

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

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

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

კურსის განმავლობაში შეისწავლით:

ლექცია 1	როგორ მუშაობს ვებსაიტი
	რა არის HTML და CSS
	სამუშაო გარემოს მომზადება
	ბრაუზერის დეველოპერის ხელსაწყოები
	რა არის HTML თეგი, პირველი საიტის აწყობა
	დავალება
ლექცია 2	HTML-ის ატრიბუტები
	class ატრიბუტი და მისი თავისებურებები
	id ატრიბუტი და მისი თავისებურებები
	style ატრიბუტი, CSS-ის შესავალი
	ელემენტების საწყისი (default) მნიშვნელობები და box model (margin, padding, box-sizing, border)
	დავალება
ლექცია 3	CSS-ის სელექტორები
	CSS-ის იმპორტი, CSS-ის ცვლადები
	ბლოკური, ინლაინ, და ბლოკურ-ინლაინი ელემენტები
	HTML ფორმები და მისი ელემენტები
	CSS-ის ფსევდო სელექტორები
	დავალება
ლექცია 4	ტიპოგრაფია, ფონტებთან მუშაობა
	ვებ ფონტების კონვერტაცია
	CSS position თვისება
	რელაციური(relative) პოზიციის გამოყენება
	ფიქსირებული(fixed) პოზიციის გამოყენება
	აბსოლუტ პოზიციის(absolute) გამოყენება
	სტიკი პოზიციის(sticky) გამოყენება
	დავალება
ლექცია 5	display: flex; თვისება
	flex container-ის თვისებების გამოყენება
	flex item-ების თვისებების გამოყენება
	gap თვისების გამოყენება პრაქტიკაში
	პრაქტიკული მაგალითები flexbox-ზე
	დავალება
ლექცია 6	display: grid; თვისება
	grid container-ის თვისებების გამოყენება
	grid item-ების თვისებების გამოყენება
	პრაქტიკული მაგალითები grid-ზე
	დავალება
ლექცია 7	რა არის რესპონსივი და რაში გამოიყენება
	@media query-ების განხილვა
	რესპონსიული საიტის მაგალითები
	რეპონსიული საიტის აწყობა
	დავალება
ლექცია 8	CSS ანიმაციების შესავალი
	keyframe ტიპის ანიმაციები
	transition თვისება
	transform თვისება
	ანიმაციური ელემენტების პრაქტიკული გამოყენება
	დავალება
ლექცია 9	ცხრილებთან მუშაობა
	ლისტებთან მუშაობა
	სურათებთან მუშაობა და მისი პრაქტიკული სავარჯიშოები
	ფონებთან მუშაობა და მისი პრაქტიკული სავარჯიშოები
	დავალება
ლექცია 10	რა არის ჯავასკრიპტი (შესავალი)
	ფინალური პროექტის დავალება
	ფინალური პროექტის დაგეგმვა
	შემდგომი ნაბიჯები
	დავალება
ლექცია 11	figma-სთან მუშაობა და დიზაინის წაკითხვა
ლექცია 11	figma-ში არსებული დიზაინის აწყობა კოდში

Sublime Text 3 - კონფიგურაცია Angular-ისთვის

გადავწყვიტე ცოტა ხნით შევეშვა VS Code-ს და დავუბრუნდე Sublime Text 3 ედითორს, ამ სტატიაში შესული იქნება Sublime Text 3-ის ჩემებური კონფიგურაცია

Package control-ის ინსტალაცია

პირველ რიგში საბლაიმის გახსნისთანავე საჭიროა დავაყენოთ Package control.

გავხსნათ საბლაიმი და დავაწვეთ command(ctrl)+shift+p, რის შემდეგაც გამოვა ჩასაწერი ველი, რომელშიც უნდა ჩავწეროთ Install Package Control, ამის შემდეგ საბლაიმი თავისით შემოგვთავაზებს ვარიანტს და ავირჩიოთ შესაბამისი Install Package Control

File Icon-ის დაყენება

საბლაიმის ფაილ აიქონები ნამდვილად არაა ლამაზი და არ წარმოაჩენს ერთი შეხედვით ფაილის ტეპებს, სწორედ ამიტომ დავაყენოთ A File Icon-ის თემა.

ვაწვებით command(ctrl)+shift+p
ვკრეფთ Package control
ვირჩევთ Install Package
ვკრეფთ A File Icon და ვაწვებით ენთერს
გადავტვირთოთ საბლაიმი

Import Helper-ის დაყენება

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

ფლაგინის სახელია ImportHelper

ვაწვებით command(ctrl)+shift+p
ვკრეფთ Package control
ვირჩევთ Install Package
ვკრეფთ ImportHelper და ვაწვებით ენთერს

ფლაგინის გამოსაყენებელი ღილაკების კომბინაციაა ctrl+alt+i

Terminus-ის დაყენება

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

ვაწვებით command(ctrl)+shift+p
ვკრეფთ Package control
ვირჩევთ Install Package
ვკრეფთ Terminus და ვაწვებით ენთერს

ინსტალაციის შემდეგ გამოვიძახოთ ღილაკების კობმინაციით command(ctrl)+shift+p და მოვძებნოთ შემდეგი ტექსტი, Preferences: Terminus Key Bindings, მას შემდეგ რაც გაიხსნება პარამეტრები ცარიელ მხარეს ფაილის ჩავწეროთ შემდეგი კონფიგურაცია

[
	{ "keys": ["alt+`"], "command": "toggle_terminus_panel" },
	// Open a terminal tab at current file directory
    {
        "keys": ["ctrl+alt+t"], "command": "terminus_open", "args": {
            "cwd": "${file_path:${folder}}"
        }
    },
]

მოცემული კონფიგურაცია დაგვეხმარება მარტივად კლავიატურის დახმარებით გამოვიძახოთ Terminus-ი

alt+` გამოიძახებს ტერმინალს, ხოლო ctrl+alt+t გამოიძახებს ტერმინალს იმ დირექტორიაში რომელზეც ვდგავართ

კონფიგურაცია

როგორც იცით ერთ-ერთი ყველაზე გამოსადეგი ღილაკის კომბინაცია არის command(ctrl)+p, რომლის დახმარებითაც მარტივად შეგვიძლია გადავიდეთ სასურველ ფაილში, ფაილის დასახელების აკრეფით.

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

კოფიგურაციის დასამატებლად აუცილებელია გავხსნათ საბლაიმის კოფიგურაციის json ფაილი Preferences > settings და დავამატოთ შემდეგი კოფიგურაცია

"folder_exclude_patterns": [
    	"node_modules/**",
    	".angular/**",
    	"dist/**",
    	".git/**"
 ]

ხაზის წაშლის ფუნქციონალი მაკზე

ვიზუალ სტუდიო კოდიდან გადმოყოლილი ჩვევა ხაზის წაშლაზე როგორც აღმოვაჩინე საბლაიმზეც დამჭირდა, მაგრამ აქ სხვა ღილაკების კომბინაციითაა, ctrl+shift+k, მაგრამ მაკზე ჩემთვის მოსახერხებელი კომბინაცია დავაყენე Preferences > Key Bindings

{ "keys": ["super+shift+k"], "command": "run_macro_file", "args": {"file": "res://Packages/Default/Delete Line.sublime-macro"} },

უბრალოდ ctrl ღილაკი შევცვალე command ღილაკით, ვინდოუსზე და ლინუქსზე თუ თქვენთვის სტანდარტული კომბინაცია მისაღებია შეგიძლიათ დატოვოთ

დირექტირიის გახსნა საიდ ბარში

Preferences > Key Bindings

{ "keys": ["super+shift+e"], "command": "reveal_in_side_bar" }

Emmet-ის დაყენება

ვაწვებით command(ctrl)+shift+p
ვკრეფთ Package control
ვირჩევთ Install Package
ვკრეფთ Emmet და ვაწვებით ენთერს

როგორ მუშაობს ვები?

თუ გაინტერესებთ როგორ მუშაობს ინტერნეტი და ზოგადად ვებ სამყარო მაშინ სწორ ადგილას მოხვდი, დღევანდელი ბლოგით შევეცდები მარტივად, თქვენთვის გასაგებ ენაზე ავხსნა მისი საფუძვლები და მუშაობის პრინციპები. მაგალითისთვის მოვიყვანოთ https://val-do.com, ანუ რა გზას გადის საიტი თქვენს ბრაუზერში მოხვედრამდე და რამდენი ოპერაციის გავლაა საჭირო.

სახელების შეთანხმებები

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

კლიენტი (client):

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

სერვერი (server):

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

IP address:

იშიფრება როგორც Internet Protocol Address (ინტერნეტ პროტოკოლის მისამართი). IP მისამართი არის უნიკალური მაიდენტიფიცირებელი რიცხვითი მისამართი (კომპიუტერის, სერვერის, პრინტერის, როუტერის და ა.შ.)  IP მისამართი შედგება 4 დანაყოფისგან რომელიც წერტილებით არის გამოყოფილი მაგ: (244.155.65.2)

HTTP:

Hyper-text Transfer Protocol. პროტოკოლი რომელსაც იყენებენ ვებ ბრაუზერები და სერვერები ერთმანეთთან საკომუნიკაციოთ ინტერნეტის დახმარებით

ISP:

Internet Service Provider, ინტერნეტის სერვისის პროვაიდერი, არის ინტერნეტ კომპანია რომელიც დგას ჩვენს და სერვერს შორის, მაგალითისთვის საქართველოში ეს კომპანიებია მაგთი და სილქნეტი, ასევე მობილური ოპერატორები.
როდესაც ჩვენ ბრაუზერში ჩავწერთ val-do.com-ს ამ დროს ISP ვალდებულია მიაკითხოს DNS (Domain Name Systems), რომელიც val-do.com-ს გადათარგმნის სერვერის IP მისამართად და გააგზავნის მოთხოვნას კონკრეტულ სერვერთან.

DNS:

Domain Name System. ეს არის უხეშად რომ ვთქვათ მონაცემთა ბაზა რომლის მიზანიცაა კონკრეტული სერვერების IP მისამართებს მიანიჭოს შესაბამისი სახელი, მაგალითად google.ge-ის ამ დროინდელი სერვერის IP მისამართია 142.250.69.196

URL:

Uniform Resources Locator. URL-ის დახმარებით შეგვიძლია სერვერზე მივაკითხოთ კონკრეტულ რესურსებს როგორებიცაა მაგალითად კონტაქტის გვერდი, მთავარი გვერდი და ა.შ.

როგორ მუშაობს ვები.

როდესაც ჩვენ ბრაუზერში ავკერფთ მისამართს, ამ დროს იგზავნება მოთხოვნა, რომელიც მიდის ჯერ ჩვენს ლოკალურ ISP-სთან შემდეგ ჩვენი ISP მიაკითხავს DNS სერვერს. DNS სერვერი ჩვენს მოთხოვნას გაგზავნის შესაბამისი IP მისამართის სერვერზე