მოცემულ გვერდზე შეგიძლიათ გაეცნოთ ჩემს მიერ დაწერილ ბლოგებს, რომელიც ძირითად შემთხვევაში შეეხება ვებ-პროგრამირებას ან ინფორმაციულ ტექნოლოგიებს
დღევანელ ბლოგში განვიხილავთ 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 + ] |
თუ ერთხელ მაინც მიგიბავთ გუგლის ფონტი თქვენს საიტზე ალბათ შემჩნეული გექნებათ ფონტის მთავარი სახელის შემდეგ sans-serif, serif ან სხვა ჩანაწერი.
დღევანდელ ბლოგში და ასევე ვიდეოში, რომელიც YouTube-ზე უკვე დევს ვისაბუბრებ web safe და browser safe-ფონტებზე.
არსებობენ სტანდარტული ფონტები, რომლებიც მოყვება ნებისმიერ ოპერაციულ სისტემას და არ აქვს მნიშვნელობა თუ რომელი სისიტემაა ის, იქნება ეს Windows, Mac os თუ Linux-ის ნებისმიერი დისტრიბუცია.
web safe ფონტებს ძირითადად ორი გამოყენება აქვთ, პირველი ის, რომ თუ ჩვენ მხოლოდ მათ გამოვიყენებთ დარწმუნებული ვიქნებით, რომ ჩვენი ფონტი ნებისმიერ ოპერაციულ სისტემაში ზუსტად ისე გამოჩნდება, როგორც ჩვენს ეკრანზე.
რაც შეეხება მეორე ვერსიას, web safe ფონტები ასევე გამოიყენება იმ შემთხვევისთვის თუ ჩვენი ე.წ. (custom) ფონტი სწორად არ ჩაიტვირთება, ამ შემთხვევაში მოერე ვერსიად ასევე შეიძლება გვქონდეს web safe ფონტი.
სანამ პროგრამირების სწავლას გადავწყვეტთ, აუცილებელია გვქნოდეს კომპიუტერი, რომელიც დააკმაყოფილებს ჩვენს მინიმალურ მოთხოვნილებებს, რომლებიც უშუალოდ კოდის წერის დროს დაგვჭირდება.
დამწყებებს ხშირად აქვთ არასწორი წარმოდგენა, რომ კომპიუტერი აუცილებლად უნდა იყოს ძალიან ძლიერი და უმკლავდებოდეს ყველაზე რთულ პროცესებსაც კი, მაგრამ მინდა გითხრათ, რომ ვებ პროგრამირების შესწავლის დასწყებად არაა აუცილებელი ე.წ. სუპერკომპიუტერი.
სანამ უშუალოდ კომპიუტერის მონაცემებზე გადავალთ, მოდი ჩამოვთვალოთ იმ პროგრამების მიახლოვებითი სია, რომლებიც სწავლისთვის დაგვჭირდება.
როგორც ზემოთ ჩამოთვლილში ხედავთ, ვებ პროგრამირების შესწავლის დასაწყებად ძალიან ცოტა პროგრამაა საჭირო, შესაბამისად ის წარმოდგენები, რომ ჩვენ აუცლებელია შევიძინოთ ე.წ. სუპერკომპიუტერი და შედარებით ბიუჯეტური კომპიუტერით არ გამოგვივა პროგრამირება, არის მცდარი.
მოდი განვსაზღვროთ მინიმალური მოთხოვნები კომპიუტერისთვის, რომელიც უნდა გავითვალისწინოთ შეძენის დროს. ამის გასარკვევად აუცილებელია კომპიუტერი აკმაყოფილებდეს პროგრამების გაშვებისთვის საჭირო მოთხოვნებს.
მაგალითისთვის, რომ გავუშვათ 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-შიც ამაყად ჩაწერთ, რომ ჯავასკრიპტის დეველოპერი ხართ.
დამიჯერეთ პროგრამირება ის სფეროა სადაც მხოლოდ თეორია არ კმარა და აუცილებელია პრაქტიაკში გამოიყენოთ ყველა ფუნქცია ან მეთოდი რომელიც თეორიაში შეისწავლეთ. სწორედ ამიტომ აუცილებელია დაიწყოთ ნამდვილი პროექტების კეთება, თუნდაც უმარტივესად გეჩვენებოდეთ.
დაიწყეთ უმარტივესი პროექტით რომელსაც აუცილებლად მიიყვანთ ბოლომდე და სრულიად იფუნქციონირებს ყოველგვარი ხარვეზების გარეშე. ასევე ეცადეთ ყოველი შემდეგი პროექტი იყოს წინაზე რთული.
პროგრამისტის და არა მარტო პროგრამისტის ერთერთი მთავარი უნარი არის საჭირო ინფორმაციის მოძიება.
დღეს ალბად უკვე აღარაა ისეთი შეკითხვა რომელზეც პასუხი არ გაცემულა და რომელიც ინტერნეტში არ იქნება გამოქვეყნებული, სწორედ ამიტომ აუცილებელია მივეჩვიოთ საძიებო სისტემის მაქსიმალურად ეფექტურად გამოყენებას.
პროგრამისტის ერთერთი სუპერ ძალა უნდა იყოს ნებისმიერი ინფორმაციის მოძიება უმოკლეს ვადებში.
ყოველთვის გახსოვდეთ, რომ მას შემდეგ, რაც თქვენ მიაღწევთ თქვენს პირველ მიზანს და დაიწყებთ რომლიმე კომპანიაში სტაჟირებას ან სამსახურს აუცილებლად მოგიწევთ გუნდთან მუშაობა, არ არსებობს კომპანიები სადაც მხოლოდ 1 პროგრამისტზე იქნება დამოკიდებული მთელი პროექტი.
მაქსიმალურად ეცადეთ შეუერთედ ისეთ ფორუმებს, ჩათებს, ჯგუფებს სადაც დამწყები დეველოპერები არიან და ხშირად დახმარებასაც ითხოვენ, არ დაგეზაროთ სხვისი დახმარება თუ რა თქმა უნდა შეგიძლიათ.
განიხილეთ თქვენთვის საინტერესო თემები გააკეთეთ გამოწვევბი გაარჩიეთ ერთმანეთის კოდი. ეს მოგცემთ სუპერ უნარს რათა მარტივად ადაპტირდეთ სხვა ჯგუფებში და გაიგოთ სიახლეები და განიხილოთ სიღრმისეულად.
მოცემულ ბლოგში განვიხილავთ tmux-ის ღილაკების კომბინაციებს, რომელიც საჭიროა ყოველდღიური გამოყენებისთვის
ღილაკის კობმინაცია | რას აკეთებს? |
---|---|
tmux |
ხსნის ახალ tmux-ის სესიას |
ctrl+b s |
აქტიური სესიების ჩამონათვალი |
ctrl+b $ |
სესიის სახელის შეცვლა |
ctrl+b d |
სესსიდან გამოსვლა (detach) |
ctrl+b ( |
წინა სესიაზე გადასვლა |
ctrl+b ) |
შემდეგ სესიაზე გადასვლა |
ღილაკის კობმინაცია | რას აკეთებს? |
ctrl+b c |
ახალი ფანჯრის შექმნა |
ctrl+b , |
ფანჯრის სახელის გადარქმევა |
ctrl+b & |
ფანჯრის დახურვა |
ctrl+b w |
აქტიური ფანჯრების სია |
ctrl+b p |
წინა ფანჯრის აქტივაცია |
ctrl+b n |
შემდეგი ფანჯრის აქტივაცია |
ctrl+b 0...9 |
ფანჯრის აქტივაცია ინდექსის მიხედვით |
ctrl+b l |
ბოლო აქტიური ფანჯრის გადართვა გადმოვრთვა ე.წ. (toggle) |
ღილაკის კომბინაცია | რას აკეთებს? |
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-ში
კომბინაცია | აღწერა |
/ |
ძიების დაწყება |
%s/მოსაძებნი_სიტყვა/ჩასანაცვლებელი_სიტყვა/gc |
სიტყვის მოძებნა ფაილში და ჩანაცვლება დადასტურებით. დასადასტურებლად აუცილებელია y ან n |
კომბინაცია | აღწერა |
"+p |
clipboard-იდან ჩასმა (paste) |
"+y |
clipboard-ზე დაკოპირება (copy to clipboard) |
კომბნაცია | აღწერა |
i |
აქტივაცია კურსორამდე |
I |
აქტივაცია ხაზის დასაწყისში |
a |
აქტივაცია კურსორის შემდეგ |
A |
აქტივაცია ხაზის ბოლოში |
O |
აქტივაცია ხაზის ზემოთ |
o |
აქტივაცია ხაზის ქვემოთ |
ea |
აქტივაცია სიტყვის ბოლოში |
|
სიმბოლოს წაშლა კურსორამდე, როდესაც უკვე აქტიურია insert რეჟიმი |
|
სიტყვის წაშლა კურსორამდე, როდესაც უკვე აქტიურია insert რეჟიმი |
|
ახალი ხაზის დაწყება, როდესაც უკვე აქტიურია insert რეჟიმი |
|
ხაზის მარჯვნივ წანაცვლება, როდესაც უკვე აქტიურია insert რეჟიმი |
|
ხაზის მარცხნივ წანაცვლება, როდესაც უკვე აქტიურია insert რეჟიმი |
|
insert რეჟიმიდან გამოსვლა |
როდესაც ანგულარის აპლიკაციას ვაწყობთ, იმითვის, რომ ჩვენი საიტი გუგლში და სოციალურ ქსელებში ლამაზად და ინფორმაციულად გამოჩნდეს გაზიარებისას, საჭიროა სწორი meta
თეგების გაწერა, სწორედ ამიტომ გადავწყვიტე სტანდარტულად დამეწერა სერვისი, რომელიც ჩემს ყველა დაწერილ აპლიკაციაში მაქვს გამოყენებული.
<!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-ს
როგორც იცით, იმისთვის, რომ გუგლის საძიებო სისტემაში ჩვენი გვერდი ლამაზად მეტად ინფორმირებულად გამოჩნდეს საჭიროა 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>
იმისათვის, რომ დაიწყოთ თქვენი 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-სთან მუშაობა და დიზაინის წაკითხვა |
figma-ში არსებული დიზაინის აწყობა კოდში |
გადავწყვიტე ცოტა ხნით შევეშვა VS Code-ს და დავუბრუნდე Sublime Text 3 ედითორს, ამ სტატიაში შესული იქნება Sublime Text 3-ის ჩემებური კონფიგურაცია
პირველ რიგში საბლაიმის გახსნისთანავე საჭიროა დავაყენოთ Package control.
გავხსნათ საბლაიმი და დავაწვეთ command(ctrl)+shift+p, რის შემდეგაც გამოვა ჩასაწერი ველი, რომელშიც უნდა ჩავწეროთ Install Package Control, ამის შემდეგ საბლაიმი თავისით შემოგვთავაზებს ვარიანტს და ავირჩიოთ შესაბამისი Install Package Control
საბლაიმის ფაილ აიქონები ნამდვილად არაა ლამაზი და არ წარმოაჩენს ერთი შეხედვით ფაილის ტეპებს, სწორედ ამიტომ დავაყენოთ A File Icon-ის თემა.
ვინაიდან ხშირად გვიწევს ჯავასკრიპტთან მუშაობა საჭიროა კიდევ ერთი კარგი ფლაგინი, რომელიც ჯავასკრიპტ კოდის იმპორტში დაგვეხმარება.
ფლაგინის სახელია ImportHelper
ფლაგინის გამოსაყენებელი ღილაკების კომბინაციაა ctrl+alt+i
Terminus-ის დაყენება
ვიზუალ სტუდიო კოდის ერთერთი ყველაზე დიდი პლიუსი ინტეგრირებული ტერმინალია, რომლის უქონლობასაც ძალიან განვიცდი საბლაიმში, სწორედ ამიტომ დავაყენოთ ინტეგრირებული ტერმინლაი სახელად 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" }
თუ გაინტერესებთ როგორ მუშაობს ინტერნეტი და ზოგადად ვებ სამყარო მაშინ სწორ ადგილას მოხვდი, დღევანდელი ბლოგით შევეცდები მარტივად, თქვენთვის გასაგებ ენაზე ავხსნა მისი საფუძვლები და მუშაობის პრინციპები. მაგალითისთვის მოვიყვანოთ https://val-do.com, ანუ რა გზას გადის საიტი თქვენს ბრაუზერში მოხვედრამდე და რამდენი ოპერაციის გავლაა საჭირო.
სანამ უშუალოდ პროცესის ახსნაზე გადავალთ აუცილებელია ვიცოდეთ სახელების შეთანხმებები, თუ რა რას ნიშნავს.
კლიენტი იგივე აპლიკაციაა რომელიც ჩვენს ლოკალურ მანქანაზეა გაშვებული, მაგალითად ჩვენი ბრაუზერი, არ აქვს მნიშვნელობა რა ტიპის ბრაუზერი იქნება ეს, ქრომი, მოზილა, საფარი თუ სხვა. კლიენტის მთავარი მიზანია ინტერნეტის/ქსელის დახმარებით გააგზავნოს მოთხოვნა სერვერთან, მიიღოს სერვერიდან მოსული პასუხი მოახდინოს მისი დეკოდირება და გვაჩვენოს საიტი ისეთ მდგომარეობაში როგორსაც ჩვეულებრივ ბრაუზერში ვხედავთ ხოლმე.
სერვერი არის კომპიუტერი რომელიც ჩართულია ინტერნეტის გლობალურ ქსელში და მას ასევე გააჩნია საკუთარი უნიკალური მისამართი IP. განსხვავებით ჩვენი ლოკალური კომპიუტერისგან, სერვერზე არის სპეციალური პროგრამული უზრუნველყოფა, რომელიც განკარგავს შემოსულ მოთხოვნებს ჩვენი კომპიუტერიდან. ძირითადი სერვერის ფუნქციაა შეინახოს ვებ-გვერდები მის საინფორმაციო საცავში, ასევე დაამუშაოს ჩვენი გაგზავნილი მოთხოვნები და გაუგზავნოს კლიენტს დამუშავებული მოთხოვნები.
იშიფრება როგორც Internet Protocol Address (ინტერნეტ პროტოკოლის მისამართი). IP მისამართი არის უნიკალური მაიდენტიფიცირებელი რიცხვითი მისამართი (კომპიუტერის, სერვერის, პრინტერის, როუტერის და ა.შ.) IP მისამართი შედგება 4 დანაყოფისგან რომელიც წერტილებით არის გამოყოფილი მაგ: (244.155.65.2)
Hyper-text Transfer Protocol. პროტოკოლი რომელსაც იყენებენ ვებ ბრაუზერები და სერვერები ერთმანეთთან საკომუნიკაციოთ ინტერნეტის დახმარებით
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 მისამართის სერვერზე
ჩვენი ვებ-გვერდის მომხმარებლის მაღალი ინტერესიდან და მოთხოვნიდან გამომდინარე გადავწყვიტე val-do.com-ზე გავაკეთო ფასიანი კურსები, რომლის ფარგლებშიც შეისწავლით Angular “ფრეიმვორქს”.
ლექციები ჩატარდება კვირაში 3 დღე და მისი ხანგრძლივობა იქნება 1 საათიდან 2 საათამდე, შევხვდებით ონლაინ, ტელეგრამის საშუალებით, ასევე ჩავიწერ ყველა ლექციას Full HD ფორმატში და გამოგიგზავნით ლექციის დასრულების შემდგომ.
კურსის ხანგრძლივობა შეადგენს 2 თვეს, რომლის ფარგლებშიც შეისწავლით Angular “ფრეიმვორქის” საფუძვლებს, არქიტექტურის დაგეგმვას და რაც ყველაზე მთავარია, მოგიწევთ რეალურ API-სთან მუშაობა.
ჩემი მიზანია მაქსიმალურად მივაჩვიო სტუდენტი “ფრეიმვორქთან” მუშაობას და ვასწავლო მისი ყველა უპირატესობა.
კურსის დასრულების ბოლოს თქვენ გექნებათ გამოცდილება რეალურ API-სთან მუშაობის და შექმნით val-do.com-ის მსგავს საიტს, რომელშიც შევა:
კურსზე რეგისტრაციისთვის აუცილებელი წინაპირობაა გავლილი გქონდეს val-do.com-ზე დამატებული კურსები:
*კურსის დასაწყებად აუცილებელია დარეგისტრირდეს მინიმუმ 5 სტუდენტი.
ℹ️ თუ გაქვს შეკითხვები შეგიძლია მოგვწერო ჩვენს ტელეგრამ 👉🏻 ჯგუფში
ლექცია 1
ლექცია 2
ლექცია 3
ლექცია 4
ლექცია 5
ლექცია 6
ლექცია 7
ლექცია 8
ლექცია 9
ლექცია 10
ლექცია 11
ლექცია 12
ლექცია 13
ლექცია 14
ლექცია 15
ლექცია 16
ლექცია 17
ლექცია 18
ლექცია 19
ლექცია 20
ლექცია 21
ლექცია 22
ლექცია 23
ლექცია 24
პ.ს. ფასიანი კურსების გამოცხადება არ ნიშნავს იმას, რომ მე შევწყვეტ უფასო პროგრამირების გაკვეთილების გადაღებას.