დაახლოებით 15 წლის წინ ვმუშაობდი კომპანიაში, სადაც ვაშენებდით აპლიკაციებს ტურისტული აგენტებისთვის, აეროპორტის მუშაკებისთვის და ავიაკომპანიებისთვის. ჩვენ ასევე ავაშენეთ ჩვენი შიდა ჩარჩო ინტერფეისის კომპონენტებისთვის და ერთგვერდიანი აპლიკაციის შესაძლებლობებისთვის. ჩვენ გვქონდა კომპონენტები ყველაფრისთვის: ველები, ღილაკები, ჩანართები, დიაპაზონები, მონაცემთა ცხრილები, მენიუები, თარიღების ამომრჩევები, არჩევები და მრავალარჩევნები. ჩვენ გვქონდა div კომპონენტიც კი. სხვათა შორის, ჩვენი div კომპონენტი შესანიშნავი იყო, ის საშუალებას გვაძლევდა გაგვეკეთებინა მომრგვალებული კუთხეები ყველა ბრაუზერზე, რაც, დაიჯერეთ თუ არა, იმ დროისთვის ადვილი საქმე არ იყო.
ჩვენი მუშაობა მოხდა ჩვენი ისტორიის მომენტში, როდესაც JS, Ajax და დინამიური HTML განიხილებოდა, როგორც რევოლუცია, რომელმაც მოგვიყვანა მომავალში. მოულოდნელად, ჩვენ შეგვეძლო გვერდის დინამიურად განახლება, სერვერის მონაცემების მიღება და სხვა გვერდებზე ნავიგაციის თავიდან აცილება, რაც ნელი იყო და ეკრანზე ორ გვერდს შორის დიდი თეთრი მართკუთხედი აანთო. იყო ფრაზა, რომელიც პოპულარული გახდა ჯეფ ეტვუდის (StackOverflow-ის დამფუძნებელი) მიერ, რომელიც ეწერა: "ნებისმიერი აპლიკაცია, რომელიც შეიძლება დაიწეროს JavaScript-ში, საბოლოოდ დაიწერება JavaScript-ში." - ჯეფ ეტვუდი
ჩვენთვის იმ დროს, ეს გაბედულად გვეჩვენებოდა, რომ რეალურად წავსულიყავით და შეგვექმნა ეს აპლიკაციები. ეს იყო სრული თანხმობა, რომ ყველაფერი გაეკეთებინა JS-თან. ასე რომ, ჩვენ ყველაფერი გავაკეთეთ JS-თან ერთად და დრო ნამდვილად არ დაგვრჩენია საქმის კეთების სხვა გზების შესასწავლად. ჩვენ ნამდვილად არ ვგრძნობდით სტიმულს, რომ სწორად გვესწავლა, რა შეეძლო HTML-სა და CSS-ს. ჩვენ ნამდვილად არ აღვიქვამდით ვებს მთლიანობაში განვითარებად აპლიკაციის პლატფორმად. ჩვენ მას ძირითადად ვუყურებდით, როგორც რაღაცას, რაზეც გვჭირდებოდა მუშაობა, განსაკუთრებით მაშინ, როდესაც საქმე ბრაუზერის მხარდაჭერას ეხებოდა. ჩვენ უბრალოდ შეგვეძლო მეტი JS-ს გადაგვეყენებინა საქმეების შესასრულებლად. დამეხმარა თუ არა დროის დახარჯვა მეტის გასაგებად, თუ როგორ მუშაობდა ვებ და რა იყო პლატფორმაზე ხელმისაწვდომი? რა თქმა უნდა, მე შემეძლო გაპარსულიყო კოდის თაიგული, რომელიც ნამდვილად არ იყო საჭირო. მაგრამ, იმ დროს, შესაძლოა არც ისე ბევრი. ხედავთ, ბრაუზერის განსხვავებები საკმაოდ მნიშვნელოვანი იყო მაშინ. ეს იყო დრო, როდესაც Internet Explorer ჯერ კიდევ დომინანტური ბრაუზერი იყო, Firefox იყო უახლოესი მეორე, მაგრამ დაიწყო ბაზრის წილის დაკარგვა Chrome-ის გამო სწრაფად იძენს პოპულარობას. მიუხედავად იმისა, რომ Chrome და Firefox საკმაოდ კარგად ეთანხმებოდნენ ვებ სტანდარტებს, გარემო, რომელშიც ჩვენი აპლიკაციები მუშაობდა, იმას ნიშნავდა, რომ ჩვენ გვქონდა IE6-ის მხარდაჭერა დიდი ხნის განმავლობაში. მაშინაც კი, როცა IE8-ის მხარდაჭერის უფლება მოგვცეს, ბრაუზერებს შორის უამრავ განსხვავებასთან გვქონდა გამკლავება. არა მხოლოდ ეს, არამედ იმ დროის ვებსაიტს უბრალოდ არ ჰქონდა ამდენი შესაძლებლობა პლატფორმაში ჩაშენებული.
იჩქარეთ დღევანდელი დღისთვის. რამ საოცრად შეიცვალა. ჩვენ არა მხოლოდ გვაქვს ამ შესაძლებლობების მეტი, ვიდრე ოდესმე, არამედ გაიზარდა მათი ხელმისაწვდომობის ტემპი. ნება მომეცით კიდევ ერთხელ დაგისვათ კითხვა: დაგეხმარებით თუ არა დღეს მეტი დროის გასაგებად, თუ როგორ მუშაობს ვებ და რა არის პლატფორმაზე ხელმისაწვდომი? აბსოლუტურად დიახ. ვებ პლატფორმის გაგებისა და გამოყენების სწავლა დღეს დიდ უპირატესობას განიჭებთ სხვა დეველოპერებთან შედარებით. მიუხედავად იმისა, მუშაობთ შესრულებაზე, ხელმისაწვდომობაზე, პასუხისმგებლობაზე, ყველა მათგანზე, თუ უბრალოდ აგზავნით UI ფუნქციებს, თუ გსურთ ამის გაკეთება, როგორც პასუხისმგებელი ინჟინერი, თქვენთვის ხელმისაწვდომი ხელსაწყოების ცოდნა დაგეხმარებათ მიაღწიოთ თქვენს მიზნებს უფრო სწრაფად და უკეთ. ზოგიერთი რამ, რისთვისაც შეიძლება ბიბლიოთეკა აღარ დაგჭირდეთ იმის ცოდნა, თუ რას უჭერს მხარს ბრაუზერები დღეს, ჩნდება კითხვა: რა შეგვიძლია დავტოვოთ? გვჭირდება div კომპონენტი მომრგვალებული კუთხეების გასაკეთებლად 2025 წელს? რა თქმა უნდა, ჩვენ არა. საზღვრის რადიუსის თვისება მხარდაჭერილია ყველა ამჟამად გამოყენებული ბრაუზერის მიერ 15 წელზე მეტი ხნის განმავლობაში. და კუთხის ფორმაც მალე მოდის, კიდევ უფრო ლამაზი კუთხეებისთვის. მოდით გადავხედოთ შედარებით უახლეს ფუნქციებს, რომლებიც ახლა ხელმისაწვდომია ყველა მთავარ ბრაუზერში და რომელთა გამოყენება შეგიძლიათ თქვენს კოდების ბაზაში არსებული დამოკიდებულებების შესაცვლელად. საქმე იმაში არ არის, რომ დაუყონებლივ გათიშოთ ყველა თქვენი საყვარელი ბიბლიოთეკა და გადაწეროთ თქვენი კოდების ბაზა. რაც შეეხება ყველაფერს, ჯერ უნდა გაითვალისწინოთ ბრაუზერის მხარდაჭერა და გადაწყვიტოთ თქვენი პროექტისთვის სპეციფიკური სხვა ფაქტორების საფუძველზე. შემდეგი ფუნქციები დანერგილია ბრაუზერის სამ მთავარ ძრავში (Chromium, WebKit და Gecko), მაგრამ შეიძლება გქონდეთ ბრაუზერის მხარდაჭერის განსხვავებული მოთხოვნები, რაც ხელს შეგიშლით მათ დაუყოვნებლივ გამოყენებაში. ახლა ჯერ კიდევ კარგი დროა, რომ გაეცნოთ ამ ფუნქციებს და, შესაძლოა, რაიმე მომენტში მათი გამოყენება დაგეგმოთ. პოპოვერები და დიალოგები Popover API,
რა თქმა უნდა, თქვენი ინტერნეტ კავშირის სიჩქარეც ალბათ გაიზარდა, მაგრამ ეს ყველასთვის ასე არ არის. და ყველას არ აქვს მოწყობილობის იგივე შესაძლებლობები. მესამე მხარის კოდის ამოღება იმისთვის, რისი გაკეთებაც შეგიძლიათ პლატფორმით, ამის ნაცვლად, სავარაუდოდ, ნიშნავს, რომ თქვენ გაგზავნით მეტ კოდს და, შესაბამისად, მიაღწევთ ნაკლებ მომხმარებელს, ვიდრე ჩვეულებრივ აკეთებთ. ინტერნეტში, ჩატვირთვის ცუდი შესრულება იწვევს მიტოვების დიდ მაჩვენებელს და აზიანებს ბრენდის რეპუტაციას. ნაკლები კოდის გაშვება მოწყობილობებზე გარდა ამისა, კოდი, რომელსაც თქვენ აგზავნით თქვენი მომხმარებლების მოწყობილობებზე, სავარაუდოდ უფრო სწრაფად იმუშავებს, თუ ის იყენებს ნაკლებ JavaScript აბსტრაქციას პლატფორმის თავზე. ის ასევე, ალბათ, უფრო საპასუხო და უფრო ხელმისაწვდომია ნაგულისხმევად. ყოველივე ეს იწვევს უფრო მეტ და ბედნიერ მომხმარებელს. შეამოწმეთ ჩემი კოლეგის ალექს რასელის ყოველწლიური შესრულების უთანასწორობის ხარვეზის ბლოგი, რომელიც გვიჩვენებს, რომ პრემიუმ მოწყობილობები ძირითადად არ არიან მილიარდობით მომხმარებლის ბაზრებზე სიმდიდრის უთანასწორობის გამო. და ეს უფსკრული მხოლოდ დროთა განმავლობაში იზრდება.
ჩამონტაჟებული ქვისა განლაგება ვებ პლატფორმის ერთ-ერთი ფუნქცია, რომელიც მალე მოვა და რომელიც მე ძალიან აღფრთოვანებული ვარ, არის CSS Masonry.
ნება მომეცით დავიწყებ იმის ახსნით, თუ რა არის მასონობა. რა არის მასონობა ქვისა არის განლაგების ტიპი, რომელიც პოპულარული გახდა Pinterest-ის მიერ წლების წინ. ის ქმნის შინაარსის დამოუკიდებელ ტრეკებს, რომლებშიც ნივთები თავს იყრიან რაც შეიძლება ახლოს ტრეკის დასაწყისთან.
ბევრი ადამიანი ხედავს მასონობას, როგორც შესანიშნავ ვარიანტს პორტფოლიოებისა და ფოტო გალერეებისთვის, რაც მას ნამდვილად შეუძლია. მაგრამ ქვისა უფრო მოქნილია, ვიდრე ის, რასაც ხედავთ Pinterest-ზე და ის არ შემოიფარგლება მხოლოდ ჩანჩქერის მსგავსი განლაგებით. მასონურ განლაგებაში:
ბილიკები შეიძლება იყოს სვეტები ან რიგები:
შინაარსის ჩანაწერები არ უნდა იყოს ერთი და იგივე ზომის:
ერთეულებს შეუძლიათ რამდენიმე ბილიკი მოიცავდეს:
ნივთები შეიძლება განთავსდეს კონკრეტულ ტრასებზე; მათ ყოველთვის არ უნდა დაიცვან განლაგების ავტომატური ალგორითმი:
დემოები აქ არის რამდენიმე მარტივი დემოსი, რომელიც გავაკეთე Chromium-ში CSS Masonry-ის მომავალი განხორციელების გამოყენებით. ფოტო გალერეის დემო ვერსია, რომელიც გვიჩვენებს, თუ როგორ შეიძლება მოიცავდეს ერთეულებს (ამ შემთხვევაში სათაური) მრავალ ტრეკზე:
კიდევ ერთი ფოტო გალერეა, სადაც ნაჩვენებია სხვადასხვა ზომის ტრეკები:
ახალი ამბების საიტის განლაგება ზოგიერთი ტრეკით უფრო ფართო ვიდრე სხვები და ზოგიერთი ელემენტი, რომელიც მოიცავს განლაგების მთელ სიგანეს:
კანბანის დაფა, რომელიც აჩვენებს, რომ ნივთები შეიძლება განთავსდეს კონკრეტულ ტრასებზე:
შენიშვნა:წინა დემოები გაკეთდა Chromium-ის ვერსიით, რომელიც ჯერ არ არის ხელმისაწვდომი ვებ მომხმარებლების უმეტესობისთვის, რადგან CSS Masonry მხოლოდ ახლა იწყებს დანერგვას ბრაუზერებში. თუმცა, ვებ დეველოპერები უკვე წლებია სიამოვნებით იყენებენ ბიბლიოთეკებს მასონური განლაგების შესაქმნელად. საიტები, რომლებიც იყენებენ მასონობას დღეს მართლაც, მასონობა დღეს საკმაოდ გავრცელებულია ინტერნეტში. აქ არის რამდენიმე მაგალითი, რომელიც აღმოვაჩინე Pinterest-ის გარდა:
და კიდევ რამდენიმე, ნაკლებად აშკარა მაგალითი:
მაშ, როგორ შეიქმნა ეს განლაგება? გამოსავალი ერთი ხრიკი, რომელიც მე დავინახე, არის Flexbox-ის განლაგების გამოყენება, მისი მიმართულების შეცვლა სვეტად და დაყენება შეფუთვაზე. ამ გზით, თქვენ შეგიძლიათ მოათავსოთ სხვადასხვა სიმაღლის ელემენტები მრავალ, დამოუკიდებელ სვეტებში, რაც ქმნის მასონური განლაგების შთაბეჭდილებას:
ამასთან, ამ გამოსავალთან არის ორი შეზღუდვა:
ნივთების თანმიმდევრობა განსხვავდება იმისგან, რაც იქნებოდა ნამდვილი მასონური განლაგებით. Flexbox-ით, ელემენტი ჯერ ავსებს პირველ სვეტს და როცა ის სავსეა, შემდეგ გადადით შემდეგ სვეტზე. ქვისა, ნივთები დაწყობილი იქნება იმ ტრასაში (ამ შემთხვევაში ან სვეტში) მეტი სივრცე აქვს. მაგრამ ასევე, და, ალბათ, უფრო მნიშვნელოვანი, ეს გამოსავალი მოითხოვს, რომ დააყენოთ ფიქსირებული სიმაღლე Flexbox კონტეინერისთვის; წინააღმდეგ შემთხვევაში, შეფუთვა არ მოხდებოდა.
მესამე მხარის მასონური ბიბლიოთეკები უფრო მოწინავე შემთხვევებისთვის, დეველოპერები იყენებდნენ ბიბლიოთეკებს. ამისათვის ყველაზე ცნობილ და პოპულარულ ბიბლიოთეკას უბრალოდ მასონური ჰქვია და NPM-ის მიხედვით კვირაში დაახლოებით 200000-ჯერ იტვირთება. Squarespace ასევე უზრუნველყოფს განლაგების კომპონენტს, რომელიც ასახავს მასონურ განლაგებას, კოდის გარეშე ალტერნატივისთვის და ბევრი საიტი იყენებს მას. ორივე ეს ვარიანტი იყენებს JavaScript კოდს განლაგებაში ელემენტების განსათავსებლად. ჩაშენებული ქვისა მე ნამდვილად აღფრთოვანებული ვარ, რომ მასონობა ახლა იწყებს ბრაუზერებში გამოჩენას, როგორც ჩაშენებული CSS ფუნქცია. დროთა განმავლობაში, თქვენ შეძლებთ გამოიყენოთ მასონური სისტემა, როგორც Grid ან Flexbox, ანუ რაიმე გამოსავლის ან მესამე მხარის კოდის საჭიროების გარეშე. ჩემი გუნდი Microsoft-ში ახორციელებს ჩაშენებულ მასონურ მხარდაჭერას Chromium-ის ღია კოდის პროექტში, რომელზეც დაფუძნებულია Edge, Chrome და მრავალი სხვა ბრაუზერი. Mozilla იყო ბრაუზერის პირველი გამყიდველი, რომელმაც შემოგვთავაზა Masonry-ის ექსპერიმენტული განხორციელება ჯერ კიდევ 2020 წელს. და Apple ასევე ძალიან დაინტერესებული იყო ამ ახალი ვებ განლაგების პრიმიტიული ქცევით. ფუნქციის სტანდარტიზაციის სამუშაოები ასევე წინ მიიწევს, CSS სამუშაო ჯგუფში შეთანხმებით ზოგადი მიმართულების შესახებ და კიდევ ახალი დისპლეის ტიპის ჩვენება: ქსელის ზოლები. თუ გსურთ გაიგოთ მეტი მასონობის შესახებ და თვალყური ადევნოთ პროგრესს, იხილეთ ჩემი CSS Masonry რესურსების გვერდი. დროთა განმავლობაში, როდესაც ქვისა გახდება საბაზისო ფუნქცია, ისევე როგორც Grid ან Flexbox, ჩვენ შევძლებთ უბრალოდ გამოვიყენოთ იგი და ვისარგებლოთ:
უკეთესი შესრულება, უკეთესი რეაგირება, გამოყენების სიმარტივე და უფრო მარტივი კოდი.
მოდით უფრო ახლოს მივხედოთ მათ. უკეთესი შესრულება საკუთარი მასონური განლაგების სისტემის შექმნა ან მესამე მხარის ბიბლიოთეკის გამოყენება ნიშნავს, რომ თქვენ მოგიწევთ JavaScript კოდის გაშვება ელემენტების ეკრანზე განთავსებისთვის. ეს ასევე ნიშნავს, რომ ეს კოდი იქნება დაბლოკილი. მართლაც, ან არაფერი გამოჩნდება, ან საგნები არ იქნება სწორ ადგილას ან სწორ ზომებში, სანამ JavaScript კოდი არ გაიშვება. ქვისა განლაგება ხშირად გამოიყენება ვებ გვერდის ძირითად ნაწილზე, რაც ნიშნავს, რომ კოდი აიძულებს თქვენს ძირითად შინაარსს უფრო გვიან გამოჩნდეს, ვიდრე სხვაგვარად გამოიყურებოდა, ამცირებს თქვენს LCP-ს, ან უდიდეს კონტენტულ საღებავის მეტრიკას, რომელიც დიდ როლს ასრულებს აღქმულ შესრულებასა და საძიებო სისტემის ოპტიმიზაციაში. მე გამოვცადე Masonry JS ბიბლიოთეკა მარტივი განლაგებით და DevTools-ში ნელი 4G კავშირის სიმულირებით. ბიბლიოთეკა არც თუ ისე დიდია (24KB, 7.8KB gzipped), მაგრამ ჩემი ტესტის პირობებში ჩატვირთვას დასჭირდა 600ms. აქ არის შესრულების ჩანაწერი, რომელიც აჩვენებს მასონური ბიბლიოთეკის დატვირთვის დიდ დროს 600 ms, და რომ სხვა რენდერის აქტივობა არ მომხდარა, სანამ ეს ხდებოდა:
გარდა ამისა, საწყისი ჩატვირთვის დროის შემდეგ, გადმოწერილი სკრიპტის გაანალიზება, კომპილაცია და გაშვება იყო საჭირო. ეს ყველაფერი, როგორც უკვე აღვნიშნეთ, ბლოკავდა გვერდის რენდერირებას. ბრაუზერში ჩაშენებული Masonry განხორციელებით, ჩვენ არ გვექნება სკრიპტი ჩატვირთვის და გასაშვებად. ბრაუზერის ძრავა მხოლოდ თავის საქმეს გააკეთებს გვერდის გადაცემის საწყის ეტაპზე. უკეთესი რეაგირება ისევე, როგორც გვერდის პირველად ჩატვირთვისას, ბრაუზერის ფანჯრის ზომის შეცვლა იწვევს ამ გვერდზე განლაგების ხელახლა გადმოცემას. თუმცა, ამ ეტაპზე, თუ გვერდი იყენებს Masonry JS ბიბლიოთეკას, არ არის საჭირო სკრიპტის ხელახლა ჩატვირთვა, რადგან ის უკვეაქ. თუმცა, კოდი, რომელიც ნივთებს სწორ ადგილებში გადააქვს, უნდა ამოქმედდეს. ახლა, როგორც ჩანს, ეს კონკრეტული ბიბლიოთეკა საკმაოდ სწრაფად აკეთებს ამას, როდესაც გვერდი იტვირთება. თუმცა, ის აცოცხლებს ელემენტებს, როდესაც მათ სჭირდებათ ფანჯრის ზომის შეცვლაზე სხვა ადგილას გადატანა და ეს დიდ განსხვავებას ქმნის. რა თქმა უნდა, მომხმარებლები არ ხარჯავენ დროს ბრაუზერის ფანჯრების ზომის შეცვლაში, როგორც ჩვენ დეველოპერები. მაგრამ ეს ანიმაციური ზომის შეცვლის გამოცდილება შეიძლება საკმაოდ დამღლელი იყოს და დასძენს აღქმულ დროს, რომელიც სჭირდება გვერდის ახალ ზომასთან ადაპტაციისთვის. გამოყენების სიმარტივე და უფრო მარტივი კოდი რამდენად მარტივია ვებ ფუნქციის გამოყენება და რამდენად მარტივია კოდის გარეგნობა, მნიშვნელოვანი ფაქტორებია, რამაც შეიძლება დიდი განსხვავება გამოიწვიოს თქვენი გუნდისთვის. რა თქმა უნდა, ისინი არ შეიძლება იყოს ისეთი მნიშვნელოვანი, როგორც მომხმარებლის საბოლოო გამოცდილება, მაგრამ დეველოპერის გამოცდილება გავლენას ახდენს შენარჩუნებაზე. ჩაშენებული ვებ ფუნქციის გამოყენებას აქვს მნიშვნელოვანი უპირატესობები ამ ფრონტზე:
დეველოპერები, რომლებმაც უკვე იციან HTML, CSS და JS, დიდი ალბათობით შეძლებენ ამ ფუნქციის მარტივად გამოყენებას, რადგან ის შექმნილია კარგად ინტეგრირებისთვის და შეესაბამებოდეს სხვა ვებ პლატფორმას. არ არსებობს ფუნქციის გამოყენების ცვლილებების დარღვევის რისკი. ამ ფუნქციის მოძველების ან შენარჩუნების თითქმის ნულოვანი რისკია.
ჩაშენებული მასონობის შემთხვევაში, რადგან ეს არის განლაგების პრიმიტიული, თქვენ იყენებთ მას CSS-დან, ისევე როგორც Grid ან Flexbox, JS არ არის ჩართული. ასევე, განლაგებასთან დაკავშირებული სხვა CSS თვისებები, როგორიცაა gap, მუშაობს ისე, როგორც თქვენ მოელით. არ არსებობს ხრიკები ან გამოსავალი, რომელთა შესახებაც უნდა იცოდეთ და ის, რასაც თქვენ ისწავლით, დოკუმენტირებულია MDN-ზე. Masonry JS lib-ისთვის, ინიციალიზაცია ცოტა რთულია: ის მოითხოვს მონაცემთა ატრიბუტს სპეციფიკური სინტაქსით, ფარული HTML ელემენტებთან ერთად სვეტების და ხარვეზების ზომის დასაყენებლად. გარდა ამისა, თუ გსურთ სვეტების დაფარვა, თქვენ თავად უნდა შეიყვანოთ ხარვეზის ზომა, რათა თავიდან აიცილოთ პრობლემები:
<სტილი> ტრეკ-სიზერი, .პუნქტი { სიგანე: 20%; } .gutter-sizer { სიგანე: 1რმ; } .პუნქტი { სიმაღლე: 100px; margin-block-end: 1rem; } .item:nth-child(კენტი) { სიმაღლე: 200px; } .item--width2 { სიგანე: calc(40% + 1rem); }
მოდით შევადაროთ ეს იმას, თუ როგორ გამოიყურება ჩაშენებული მასონური განხორციელება: <სტილი> .კონტეინერი { ჩვენება: ბადე-ზოლები; ბადე-ზოლები: გამეორება (4, 20%); უფსკრული: 1რემ; } .პუნქტი { სიმაღლე: 100px; } .item:nth-child(კენტი) { სიმაღლე: 200px; } .item--width2 { ბადე-სვეტი: span 2; }
უფრო მარტივი, უფრო კომპაქტური კოდი, რომელსაც შეუძლია უბრალოდ გამოიყენოს ისეთი რამ, როგორიცაა უფსკრული და სადაც ტრეკების დაფარვა ხდება 2-ით, ისევე როგორც ბადეში, და არ საჭიროებს თქვენგან სწორი სიგანის გამოთვლას, რომელიც მოიცავს უფსკრული ზომას. როგორ გავიგოთ რა არის ხელმისაწვდომი და როდის არის ხელმისაწვდომი? საერთო ჯამში, კითხვა ნამდვილად არ არის, უნდა გამოიყენოთ თუ არა ჩაშენებული ქვისა JS ბიბლიოთეკაზე, არამედ ის, თუ როდის. Masonry JS ბიბლიოთეკა საოცარია და მრავალი წლის განმავლობაში ავსებს ხარვეზს ვებ პლატფორმაში და მრავალი ბედნიერი დეველოპერისთვის და მომხმარებლისთვის. მას აქვს რამდენიმე ნაკლი, თუ შეადარებთ ჩაშენებულ მასონურ განხორციელებას, რა თქმა უნდა, მაგრამ ეს არ არის მნიშვნელოვანი, თუ ეს განხორციელება მზად არ არის. ჩემთვის ადვილია ამ მაგარი ახალი ვებ პლატფორმის მახასიათებლების ჩამოთვლა, რადგან მე ვმუშაობ ბრაუზერის გამყიდველში და ამიტომ, როგორც წესი, ვიცი, რა ხდება. მაგრამ დეველოპერები ხშირად აზიარებენ, გამოკითხვის შემდეგ, რომ ახალი ნივთების თვალყურის დევნება რთულია. ინფორმირებული ყოფნა რთულია და კომპანიები ყოველთვის პრიორიტეტს არ ანიჭებენ სწავლას. ამის დასახმარებლად, აქ არის რამდენიმე რესურსი, რომლებიც უზრუნველყოფენ განახლებებს მარტივი და კომპაქტური გზებით, რათა სწრაფად მიიღოთ თქვენთვის საჭირო ინფორმაცია:
ვებ პლატფორმას აქვს მკვლევარის საიტი: თქვენ შეიძლება დაინტერესდეთ მისი გამოშვების შენიშვნების გვერდით. და, თუ მოგწონთ RSS, შეამოწმეთ გამოშვების შენიშვნების არხი, ისევე როგორც საბაზისო ახლად ხელმისაწვდომი და ფართოდ ხელმისაწვდომი არხები.
ვებპლატფორმის სტატუსის დაფა: შეიძლება მოგეწონოთ მისი სხვადასხვა საბაზისო წლის გვერდები.
Chrome პლატფორმის სტატუსის საგზაო რუკის გვერდი.
თუ ცოტა მეტი დრო გაქვთ, შესაძლოა ასევე დაგაინტერესოთ ბრაუზერის მოვაჭრეების გამოშვების შენიშვნები:
Chrome ზღვარი Firefox Safari
კიდევ უფრო მეტი რესურსისთვის, იხილეთ ჩემი ნავიგაცია ვებ პლატფორმის ჩეტფურცელზე. ჩემი საქმე ჯერ კიდევ არ არის განხორციელებული ეს არის პრობლემის მეორე მხარე. მაშინაც კი, თუ თქვენ იპოვით დროს, ენერგიას და გზებს თვალყურის დევნებისთვის, მაინც იმედგაცრუებული გაქვთ თქვენი ხმის გაგონება და თქვენი საყვარელი ფუნქციების დანერგვა. შესაძლოა, წლების განმავლობაში ელოდეთ კონკრეტული ხარვეზის აღმოფხვრას, ან კონკრეტული ფუნქციის გაგზავნას ბრაუზერში, სადაც ის ჯერ კიდევ აკლია. მე ვიტყვი, რომ ბრაუზერის მოვაჭრეები უსმენენ. მე ვარ რამდენიმე ორგანიზაციათაშორისი გუნდის ნაწილი, სადაც მუდმივად განვიხილავთ დეველოპერის სიგნალებსა და გამოხმაურებებს. ჩვენ ვუყურებთ გამოხმაურების ბევრ სხვადასხვა წყაროს, როგორც შიდა, თითოეული ბრაუზერის მომწოდებლის, ასევე გარე/საჯარო ფორუმებზე, ღია კოდის პროექტებზე, ბლოგებსა და გამოკითხვებზე. და, ჩვენ ყოველთვის ვცდილობთ შევქმნათ უკეთესი გზები დეველოპერებისთვის, რომ გაიზიარონ თავიანთი კონკრეტული საჭიროებები და გამოყენების შემთხვევები. ასე რომ, თუ შეგიძლიათ, გთხოვთ, მოითხოვოთ მეტი ბრაუზერის მოვაჭრეებისგან და ზეწოლა მოახდინოთ ჩვენზე, რომ განვახორციელოთ თქვენთვის საჭირო ფუნქციები. მე მესმის, რომ ამას დრო სჭირდება და ასევე შეიძლება იყოს დამაშინებელი (რომ აღარაფერი ვთქვათ შესვლის მაღალ ბარიერზე), მაგრამ ის ასევე მუშაობს. აქ მოცემულია რამდენიმე გზა, რომლითაც შეგიძლიათ გაიგოთ თქვენი (ან თქვენი კომპანიის) ხმა: მიიღეთ ყოველწლიური გამოკითხვები JS-ის, CSS-ის მდგომარეობისა და HTML-ის მდგომარეობის შესახებ. ისინი დიდ როლს ასრულებენ იმაში, თუ როგორ აფასებენ ბრაუზერის გამყიდველები თავიანთ სამუშაოს. თუ გჭირდებათ კონკრეტული სტანდარტზე დაფუძნებული API, რომელიც უნდა განხორციელდეს თანმიმდევრულად ბრაუზერებში, განიხილეთ წინადადების წარდგენა Interop პროექტის მომდევნო გამეორებაზე. ამას მეტი დრო სჭირდება, მაგრამ გაითვალისწინეთ, როგორ გაუზიარეს Shopify-მა და RUMvision-მა Interop 2026-ის სურვილების სიები. მსგავსი დეტალური ინფორმაცია შეიძლება ძალიან სასარგებლო იყოს ბრაუზერის მოვაჭრეებისთვის პრიორიტეტების დასაყენებლად. ბრაუზერის მოვაჭრეებზე გავლენის მოხდენის უფრო სასარგებლო ბმულებისთვის, იხილეთ ჩემი ნავიგაცია ვებ პლატფორმის ჩეტფურცელზე. დასკვნა დასასრულს, ვიმედოვნებ, რომ ამ სტატიამ დაგიტოვათ რამდენიმე რამ, რომელზეც უნდა იფიქროთ:
მღელვარება ქვისა და სხვა მომავალი ვებ ფუნქციებისთვის. რამდენიმე ვებ მახასიათებელი, რომელთა გამოყენებაც გსურთ. მორგებული ან მესამე მხარის კოდის რამდენიმე ნაწილი, რომელთა ამოღება შესაძლებელია ჩაშენებული ფუნქციების სასარგებლოდ. რამდენიმე გზა თვალყური ადევნოთ იმას, რაც მოდის და გავლენა მოახდინოს ბრაუზერის მოვაჭრეებზე.
რაც მთავარია, იმედი მაქვს დაგარწმუნეთ ვებ პლატფორმის სრული პოტენციალის გამოყენების უპირატესობებში.
