මීට වසර 15 කට පමණ පෙර, මම සංචාරක නියෝජිතයින්, ගුවන් තොටුපල සේවකයින් සහ ගුවන් සමාගම් සඳහා යෙදුම් තැනූ සමාගමක සේවය කරමින් සිටියෙමි. අපි UI සංරචක සහ තනි පිටු යෙදුම් හැකියාවන් සඳහා අපගේම අභ්යන්තර රාමුවක් ද ගොඩනගා ගත්තෙමු. අපට සෑම දෙයක් සඳහාම සංරචක තිබුණි: ක්ෂේත්ර, බොත්තම්, ටැබ්, පරාස, දත්ත වගු, මෙනු, ඩේට්පිකර්, තේරීම්, සහ බහු තේරීම්. අපිට div සංරචකයක් පවා තිබුණා. අපගේ div සංරචකය මාර්ගය වන විට විශිෂ්ට විය, එය අපට සියලු බ්රවුසරවල වටකුරු කොන් කිරීමට ඉඩ සලසයි, එය විශ්වාස කළත් නැතත්, එකල එය කිරීම පහසු දෙයක් නොවීය.
JS, Ajax සහ dynamic HTML අපව අනාගතයට ගෙන ආ විප්ලවයක් ලෙස සලකන විට අපගේ කාර්යය අපගේ ඉතිහාසයේ එක් අවස්ථාවක සිදු විය. හදිසියේම, අපට පිටුවක් ගතිකව යාවත්කාලීන කිරීමට, සේවාදායකයකින් දත්ත ලබා ගැනීමට සහ වෙනත් පිටු වෙත සැරිසැරීමෙන් වැළකී සිටීමට හැකි විය, එය මන්දගාමී ලෙස පෙනෙන අතර පිටු දෙක අතර තිරයේ විශාල සුදු සෘජුකෝණාස්රයක් දැල්වීය. ජෙෆ් ඇට්වුඩ් (ස්ටැක් ඕවර්ෆ්ලෝ හි නිර්මාතෘ) විසින් ජනප්රිය කරන ලද වාක්ය ඛණ්ඩයක් විය: "JavaScript වලින් ලිවිය හැකි ඕනෑම යෙදුමක් අවසානයේ JavaScript වලින් ලියනු ලැබේ." - Jeff Atwood
එකල අපට, මෙය සැබවින්ම ගොස් එම යෙදුම් නිර්මාණය කිරීමට නිර්භීතකමක් ලෙස හැඟී ගියේය. JS එකෙන් හැම දෙයක්ම කරන්න බ්ලැන්කට් අනුමැතියක් වගේ දැනුණා. එබැවින් අපි JS සමඟ සෑම දෙයක්ම කළ අතර, දේවල් කිරීමේ වෙනත් ක්රම පිළිබඳව පර්යේෂණ කිරීමට අපි කාලය ගත නොකළෙමු. HTML සහ CSS වලට කළ හැකි දේ නිවැරදිව ඉගෙන ගැනීමට දිරිගැන්වීමක් අපට ඇත්තටම දැනුණේ නැත. අපි ඇත්තටම වෙබය සම්පූර්ණයෙන්ම පරිණාමය වන යෙදුම් වේදිකාවක් ලෙස වටහා ගත්තේ නැත. අපි එය බොහෝ දුරට දුටුවේ අපට වැඩ කිරීමට අවශ්ය දෙයක් ලෙසයි, විශේෂයෙන් බ්රව්සර් සහාය සම්බන්ධයෙන්. දේවල් සිදු කිරීම සඳහා අපට එයට තවත් JS විසි කළ හැකිය. වෙබය ක්රියා කළ ආකාරය සහ වේදිකාවේ ඇති දේ ගැන වැඩිදුර දැන ගැනීමට කාලය ගත කිරීම මට උපකාරවත් වේද? ඇත්ත වශයෙන්ම, මට ඇත්තටම අවශ්ය නොවන කේත පොකුරක් රැවුල බෑමට ඉඩ තිබුණි. එහෙත්, එම අවස්ථාවේ දී, සමහර විට එය එතරම් නොවේ. ඔබට පෙනේ, බ්රවුසරයේ වෙනස්කම් එකල ඉතා වැදගත් විය. මෙය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් තවමත් ප්රමුඛ බ්රවුසරය වූ කාලයකි, ෆයර්ෆොක්ස් දෙවන ස්ථානයට පත්ව ඇත, නමුත් ක්රෝම් වේගයෙන් ජනප්රිය වීම හේතුවෙන් වෙළඳපල කොටස අහිමි වීමට පටන් ගත්තේය. ක්රෝම් සහ ෆයර්ෆොක්ස් වෙබ් ප්රමිතීන්ට එකඟ වීමට තරමක් දක්ෂ වුවද, අපගේ යෙදුම් ක්රියාත්මක වූ පරිසරයන් නිසා අපට දිගු කාලයක් IE6 සඳහා සහය දැක්වීමට සිදු විය. IE8 සඳහා සහය දැක්වීමට අපට අවසර දී තිබියදීත්, බ්රව්සර් අතර වෙනස්කම් රාශියක් සමඟ කටයුතු කිරීමට අපට සිදු විය. එපමණක් නොව, වේදිකාව තුළම ගොඩනඟා ඇති බොහෝ හැකියාවන් එකල වෙබ් අඩවියට නොතිබුණි.
අද දක්වා වේගයෙන් ඉදිරියට යන්න. දේවල් විශාල ලෙස වෙනස් වී ඇත. වෙන කවරදාකටත් වඩා මෙම හැකියාවන් අපට තිබේ පමණක් නොව, ඒවා ලබා ගත හැකි අනුපාතය ද වැඩි වී ඇත. මට නැවත ප්රශ්නය ඇසීමට ඉඩ දෙන්න, එසේ නම්: වෙබය ක්රියා කරන ආකාරය සහ වේදිකාවේ ඇති දේ ගැන තව දැන ගැනීමට කාලය ගැනීම අද ඔබට උපකාර කරයිද? නියත වශයෙන්ම ඔව්. අද වෙබ් වේදිකාව තේරුම් ගැනීමට සහ භාවිතා කිරීමට ඉගෙන ගැනීම අනෙකුත් සංවර්ධකයින්ට වඩා විශාල වාසියක් ඔබට ලබා දෙයි. ඔබ කාර්ය සාධනය, ප්රවේශ්යතාව, ප්රතිචාරාත්මක බව, ඒ සියල්ල එකට වැඩ කළත්, නැතහොත් UI විශේෂාංග නැව්ගත කිරීම පමණක් කළත්, ඔබට එය වගකිවයුතු ඉංජිනේරුවෙකු ලෙස කිරීමට අවශ්ය නම්, ඔබට ලබා ගත හැකි මෙවලම් දැන ගැනීම ඔබේ ඉලක්ක ඉක්මනින් හා වඩා හොඳින් ළඟා කර ගැනීමට උපකාරී වේ. ඔබට තවදුරටත් පුස්තකාලයක් අවශ්ය නොවන සමහර දේවල් අද බ්රවුසර සඳහා සහය දක්වන්නේ කුමක් දැයි දැන ගැනීමෙන්, ප්රශ්නය නම්: අපට ඉවත් කළ හැක්කේ කුමක්ද? 2025 දී වටකුරු කොන් කිරීමට අපට div සංරචකයක් අවශ්යද? ඇත්ත වශයෙන්ම, අපි නැහැ. දේශසීමා අරය දේපල දැනට භාවිතා කරන සියලුම බ්රව්සර් විසින් වසර 15 කට වැඩි කාලයක් මෙම අවස්ථාවේදී සහාය දක්වයි. ඊටත් වඩා විචිත්රවත් කොන සඳහා කෙළවරේ හැඩය ද ඉක්මනින් පැමිණේ. සියලුම ප්රධාන බ්රව්සර්වල දැන් පවතින, සහ ඔබේ කේත පදනමේ පවතින පරායත්තතා ප්රතිස්ථාපනය කිරීමට ඔබට භාවිත කළ හැකි සාපේක්ෂව මෑතකාලීන විශේෂාංග දෙස බලමු. කාරණය වන්නේ ඔබේ ආදරණීය පුස්තකාල සියල්ල වහාම ඉවත් කර ඔබේ කේත පදනම නැවත ලිවීම නොවේ. අනෙක් සියල්ල සඳහා, ඔබ මුලින්ම බ්රවුසර සහාය සැලකිල්ලට ගත යුතු අතර ඔබේ ව්යාපෘතියට විශේෂිත වූ වෙනත් සාධක මත පදනම්ව තීරණය කළ යුතුය. පහත විශේෂාංග ප්රධාන බ්රව්සර් එන්ජින් තුනේ (Chromium, WebKit, සහ Gecko) ක්රියාත්මක කර ඇත, නමුත් ඔබට ඒවා වහාම භාවිතා කිරීමෙන් වළක්වන විවිධ බ්රවුසර සහාය අවශ්යතා තිබිය හැකිය. කෙසේ වෙතත්, මෙම විශේෂාංග ගැන ඉගෙන ගැනීමට දැන් හොඳ කාලයක් වන අතර, සමහර විට ඒවා යම් අවස්ථාවක භාවිතා කිරීමට සැලසුම් කරන්න. Popovers සහ Dialogs Popover API,
නිසැකවම, ඔබගේ අන්තර්ජාල සම්බන්ධතා වේගය බොහෝ විට වැඩි වී ඇත, නමුත් එය සෑම කෙනෙකුටම නොවේ. තවද සෑම කෙනෙකුටම එකම උපාංග හැකියාවන් නොමැත. ඔබට වේදිකාව සමඟ කළ හැකි දේවල් සඳහා තුන්වන පාර්ශ්ව කේතයක් ඇදීම, ඒ වෙනුවට, බොහෝ විට අදහස් වන්නේ ඔබ වැඩිපුර කේත නැව්ගත කරන බවත්, එබැවින් ඔබ සාමාන්යයෙන් වඩා අඩු පාරිභෝගිකයින් වෙත ළඟා වන බවත් ය. වෙබයේ, නරක පැටවීමේ කාර්ය සාධනය විශාල අත්හැරීම් අනුපාතවලට තුඩු දෙන අතර සන්නාම කීර්තියට හානි කරයි. උපාංග මත අඩු කේතයක් ධාවනය කිරීම තවද, ඔබ ඔබේ පාරිභෝගිකයින්ගේ උපාංග මත නැව්ගත කරන කේතය වේදිකාවට ඉහළින් අඩු ජාවාස්ක්රිප්ට් වියුක්තයන් භාවිතා කරන්නේ නම් එය වේගයෙන් ක්රියාත්මක වේ. එය බොහෝ විට වඩා ප්රතිචාරාත්මක වන අතර පෙරනිමියෙන් වඩාත් ප්රවේශ විය හැකිය. මේ සියල්ල වඩාත් සතුටුදායක ගනුදෙනුකරුවන්ට මඟ පාදයි. ධන අසමානතාවය හේතුවෙන් බිලියන ගණනක් පරිශීලකයින් සිටින වෙළඳපොලේ වාරික උපාංග බොහෝ දුරට නොපැමිණෙන බව පෙන්වන මගේ සගයා වන ඇලෙක්ස් රසල්ගේ වාර්ෂික කාර්ය සාධන අසමානතා පරතරය බ්ලොගය පරීක්ෂා කරන්න. තවද මෙම පරතරය කාලයත් සමඟ වර්ධනය වේ.
ඉදිකළ පෙදරේරු පිරිසැලසුම ළඟදීම පැමිණෙන එක් වෙබ් වේදිකා විශේෂාංගයක් වන අතර එය CSS Masonry වේ.
පෙදරේරු ශිල්පය යනු කුමක්දැයි පැහැදිලි කිරීමෙන් මම ආරම්භ කරමි. පෙදරේරු යනු කුමක්ද? පෙදරේරු යනු වසර ගණනාවකට පෙර Pinterest විසින් ජනප්රිය කරන ලද පිරිසැලසුමකි. එය හැකිතාක් ධාවන පථයේ ආරම්භයට ආසන්නව අයිතම අසුරන අන්තර්ගතයේ ස්වාධීන පීලි නිර්මාණය කරයි.
බොහෝ අය පෙදරේරු කළඹ සහ ඡායාරූප ගැලරි සඳහා විශිෂ්ට විකල්පයක් ලෙස දකින අතර, එය නිසැකවම කළ හැකිය. නමුත් පෙදරේරු ඔබ Pinterest හි දකින දේට වඩා නම්යශීලී වන අතර එය දියඇලි වැනි පිරිසැලසුම් වලට පමණක් සීමා නොවේ. පෙදරේරු පිරිසැලසුමක:
ධාවන පථ තීරු හෝ පේළි විය හැක:
අන්තර්ගත ඛණ්ඩ සියල්ලම එකම ප්රමාණය විය යුතු නැත:
අයිතම බහු ධාවන පථ හරහා විහිදිය හැක:
අයිතම නිශ්චිත ධාවන පථ මත තැබිය හැකිය; ඔවුන් සැමවිටම ස්වයංක්රීය ස්ථානගත කිරීමේ ඇල්ගොරිතම අනුගමනය කළ යුතු නැත:
Demos ක්රෝමියම් හි ඉදිරියට එන CSS Masonry ක්රියාවට නැංවීමෙන් මා විසින් සාදන ලද සරල ආදර්ශන කිහිපයක් මෙන්න. ඡායාරූප ගැලරි ආදර්ශනයක්, අයිතම (මෙම අවස්ථාවෙහි මාතෘකාව) බහු ධාවන පථ හරහා විහිදෙන ආකාරය පෙන්වයි:
විවිධ ප්රමාණයේ පීලි පෙන්වන තවත් ඡායාරූප ගැලරිය:
ප්රවෘත්ති අඩවි පිරිසැලසුමක් අනෙක් ඒවාට වඩා පුළුල් පීලි සහිත, සහ සමහර අයිතම පිරිසැලසුමේ සම්පූර්ණ පළල දක්වා විහිදේ:
අයිතම නිශ්චිත ධාවන පථ මත තැබිය හැකි බව පෙන්වන කන්බන් පුවරුවක්:
සටහන: දCSS Masonry බ්රව්සර්වල ක්රියාත්මක කිරීමට පටන් ගෙන ඇති නිසා, බොහෝ වෙබ් පරිශීලකයින්ට තවමත් ලබා ගත නොහැකි Chromium අනුවාදයක් සමඟින් පෙර නිරූපණ සාදන ලදී. කෙසේ වෙතත්, වෙබ් සංවර්ධකයින් වසර ගණනාවක් තිස්සේ පෙදරේරු පිරිසැලසුම් නිර්මාණය කිරීම සඳහා පුස්තකාල භාවිතා කර ඇත. අද පෙදරේරු භාවිතා කරන අඩවි ඇත්ත වශයෙන්ම, පෙදරේරු වැඩ අද වෙබයේ බහුලව දක්නට ලැබේ. Pinterest හැර මා සොයාගත් උදාහරණ කිහිපයක් මෙන්න:
සහ තවත් කිහිපයක්, අඩු පැහැදිලි, උදාහරණ:
ඉතින්, මෙම පිරිසැලසුම් නිර්මාණය කළේ කෙසේද? විසඳුම් මා භාවිතා කර ඇති එක් උපක්රමයක් නම් ඒ වෙනුවට Flexbox පිරිසැලසුමක් භාවිතා කිරීම, එහි දිශාව තීරුවකට වෙනස් කිරීම සහ එය එතීමට සැකසීමයි. මේ ආකාරයෙන්, ඔබට පෙදරේරු පිරිසැලසුමක හැඟීම ලබා දෙමින් විවිධ උසින් යුත් අයිතම බහු ස්වාධීන තීරුවල තැබිය හැකිය:
කෙසේ වෙතත්, මෙම විසඳුම සමඟ සීමාවන් දෙකක් තිබේ:
අයිතමවල අනුපිළිවෙල සැබෑ පෙදරේරු පිරිසැලසුමක් සමඟ ඇති දේට වඩා වෙනස් ය. Flexbox සමඟින්, අයිතම පළමුව පළමු තීරුව පුරවා, එය පිරී ඇති විට, ඊළඟ තීරුවට යන්න. පෙදරේරු ශිල්පය සමඟ, වැඩි ඉඩක් ඇති ධාවන පථයේ (හෝ මෙම නඩුවේ තීරුවේ) අයිතම ගොඩගැසෙනු ඇත. එහෙත්, සහ සමහර විට වඩාත් වැදගත් ලෙස, මෙම විසඳුම සඳහා ඔබ Flexbox බහාලුම් සඳහා ස්ථාවර උසක් සැකසීමට අවශ්ය වේ; එසේ නොමැති නම්, එතීම සිදු නොවනු ඇත.
තෙවන පාර්ශවීය පෙදරේරු පුස්තකාල වඩාත් දියුණු අවස්ථා සඳහා, සංවර්ධකයින් පුස්තකාල භාවිතා කර ඇත. මේ සඳහා වඩාත් ප්රසිද්ධ සහ ජනප්රිය පුස්තකාලය සරලව හැඳින්වෙන්නේ Masonry ලෙස වන අතර එය NPM අනුව සතියකට 200,000 වාරයක් පමණ බාගත වේ. Squarespace කේත රහිත විකල්පයක් සඳහා පෙදරේරු පිරිසැලසුමක් ලබා දෙන පිරිසැලසුම් සංරචකයක් ද සපයන අතර බොහෝ වෙබ් අඩවි එය භාවිතා කරයි. මෙම විකල්ප දෙකම පිරිසැලසුමෙහි අයිතම තැබීමට JavaScript කේතය භාවිතා කරයි. ඉදිකළ පෙදරේරු Masonry දැන් Bilt-in CSS විශේෂාංගයක් ලෙස බ්රව්සර්වල දිස් වීමට පටන් ගැනීම ගැන මම ඇත්තෙන්ම සතුටට පත් වෙමි. කාලයාගේ ඇවෑමෙන්, ඔබට Grid හෝ Flexbox කරන ආකාරයටම පෙදරේරු භාවිතා කිරීමට හැකි වනු ඇත, එනම්, කිසිදු විසඳුමක් හෝ තෙවන පාර්ශවීය කේතයක් අවශ්ය නොවේ. මයික්රොසොෆ්ට් හි මගේ කණ්ඩායම Edge, Chrome සහ තවත් බොහෝ බ්රව්සර් මත පදනම් වූ Chromium විවෘත මූලාශ්ර ව්යාපෘතිය තුළ බිල්ට්-මේසන්රි සහාය ක්රියාත්මක කර ඇත. Mozilla සැබවින්ම 2020 දී Masonry පර්යේෂණාත්මකව ක්රියාත්මක කිරීමට යෝජනා කළ පළමු බ්රවුසර වෙළෙන්දා විය. තවද Apple විසින් මෙම නව වෙබ් පිරිසැලසුම ප්රාථමික සිදුකිරීමට ඉතා උනන්දු වී ඇත. සාමාන්ය දිශානතිය සහ නව සංදර්ශක ආකාරයේ සංදර්ශකය ගැන CSS ක්රියාකාරී කණ්ඩායම තුළ එකඟතාවක් ඇතිව විශේෂාංගය ප්රමිතිගත කිරීමේ කාර්යය ද ඉදිරියට යමින් පවතී: ජාලක මංතීරු. ඔබට පෙදරේරු ශිල්පය පිළිබඳ වැඩිදුර දැන ගැනීමට සහ ප්රගතිය නිරීක්ෂණය කිරීමට අවශ්ය නම්, මගේ CSS පෙදරේරු සම්පත් පිටුව බලන්න. කාලයාගේ ඇවෑමෙන්, Grid හෝ Flexbox වැනි පෙදරේරු මූලික අංගයක් බවට පත් වූ විට, අපට එය සරලව භාවිතා කිරීමට සහ ප්රතිලාභ ලබා ගැනීමට හැකි වනු ඇත:
වඩා හොඳ කාර්ය සාධනය, වඩා හොඳ ප්රතිචාර දැක්වීම, භාවිතයේ පහසුව සහ සරල කේතය.
අපි මේවා දෙස සමීපව බලමු. වඩා හොඳ කාර්ය සාධනය ඔබේම පෙදරේරු වැනි පිරිසැලසුම් පද්ධතියක් සෑදීම හෝ ඒ වෙනුවට තෙවන පාර්ශ්ව පුස්තකාලයක් භාවිතා කිරීම යනු තිරය මත අයිතම තැබීමට ඔබට JavaScript කේතය ධාවනය කිරීමට සිදුවනු ඇති බවයි. මෙයින් අදහස් කරන්නේ මෙම කේතය විදැහුම්කරණය අවහිර කරන බවයි. ඇත්ත වශයෙන්ම, එම ජාවාස්ක්රිප්ට් කේතය ක්රියාත්මක වන තුරු කිසිවක් දිස් නොවනු ඇත, නැතහොත් දේවල් නියම ස්ථානවල හෝ නියම ප්රමාණයේ නොතිබෙනු ඇත. පෙදරේරු පිරිසැලසුම බොහෝ විට වෙබ් පිටුවක ප්රධාන කොටස සඳහා භාවිතා වේ, එයින් අදහස් කරන්නේ කේතය ඔබේ ප්රධාන අන්තර්ගතය වෙනත් ආකාරයකින් පෙනෙන්නට වඩා පසුව දිස්වන අතර, ඔබේ LCP හෝ විශාලතම අන්තර්ගත තීන්ත මෙට්රික් අවප්රමාණය කරන බවයි, එය වටහා ගත් කාර්ය සාධනය සහ සෙවුම් යන්ත්ර ප්රශස්තකරණය සඳහා විශාල කාර්යභාරයක් ඉටු කරයි. මම Masonry JS පුස්තකාලය සරල පිරිසැලසුමක් සමඟින් සහ DevTools හි මන්දගාමී 4G සම්බන්ධතාවයක් අනුකරණය කිරීමෙන් පරීක්ෂා කළෙමි. පුස්තකාලය ඉතා විශාල නොවේ (24KB, 7.8KB gzipped), නමුත් මගේ පරීක්ෂණ තත්ත්ව යටතේ එය පූරණය කිරීමට 600ms ගත විය. පෙදරේරු පුස්තකාලය සඳහා දිගු 600ms පැටවීමේ කාලය පෙන්වන කාර්ය සාධන පටිගත කිරීමක් මෙන්න, සහ එය සිදුවන අතරතුර වෙනත් විදැහුම්කරණ ක්රියාකාරකමක් සිදු නොවීය:
ඊට අමතරව, ආරම්භක පැටවීමේ වේලාවෙන් පසුව, බාගත කළ ස්ක්රිප්ට් පසුව විග්රහ කිරීමට, සම්පාදනය කිරීමට සහ පසුව ක්රියාත්මක කිරීමට අවශ්ය විය. මේ සියල්ල, පෙර සඳහන් කළ පරිදි, පිටුවේ විදැහුම්කරණය අවහිර කරන ලදී. බ්රවුසරයේ සාදන ලද පෙදරේරු ක්රියාත්මක කිරීමක් සමඟ, අපට පූරණය කිරීමට සහ ධාවනය කිරීමට ස්ක්රිප්ට් එකක් නොමැත. ආරම්භක පිටු විදැහුම්කරණ පියවරේදී බ්රව්සර් එන්ජිම එහි කාර්යය ඉටු කරනු ඇත. වඩා හොඳ ප්රතිචාර දැක්වීම පිටුවක් පළමුව පූරණය වන විට මෙන්, බ්රවුසර කවුළුවේ ප්රමාණය වෙනස් කිරීම එම පිටුවේ පිරිසැලසුම නැවත විදැහුම් කිරීමට හේතු වේ. කෙසේ වෙතත්, මෙම අවස්ථාවේදී, පිටුව භාවිතා කරන්නේ Masonry JS පුස්තකාලය නම්, එය දැනටමත් ඇති බැවින්, නැවත ස්ක්රිප්ට් පූරණය කිරීමට අවශ්ය නොවේ.මෙතන. කෙසේ වෙතත්, අයිතම නිවැරදි ස්ථානවලට ගෙන යන කේතය ක්රියාත්මක විය යුතුය. දැන් මෙම විශේෂිත පුස්තකාලය පිටුව පූරණය වන විට මෙය කිරීමට ඉතා වේගවත් බව පෙනේ. කෙසේ වෙතත්, කවුළුව ප්රමාණය වෙනස් කිරීමේදී අයිතම වෙනත් ස්ථානයකට ගෙන යාමට අවශ්ය වූ විට එය සජීවිකරණය කරයි, මෙය විශාල වෙනසක් කරයි. ඇත්ත වශයෙන්ම, අපි සංවර්ධකයින් මෙන් පරිශීලකයින් ඔවුන්ගේ බ්රව්සර් කවුළු ප්රමාණය වෙනස් කිරීමට කාලය ගත නොකරයි. නමුත් මෙම සජීවිකරණ ප්රමාණය වෙනස් කිරීමේ අත්දැකීම ඉතා භයානක විය හැකි අතර පිටුව එහි නව ප්රමාණයට අනුවර්තනය වීමට ගතවන කාලයට එක් කරයි. භාවිතයේ පහසුව සහ සරල කේතය වෙබ් විශේෂාංගයක් භාවිතා කිරීම කොතරම් පහසුද සහ කේතය කෙතරම් සරල ලෙස පෙනේද යන්න ඔබේ කණ්ඩායමට විශාල වෙනසක් කළ හැකි වැදගත් සාධක වේ. ඒවා කිසිදාක අවසාන පරිශීලක අත්දැකීම තරම් වැදගත් විය නොහැක, නමුත් සංවර්ධක අත්දැකීම නඩත්තු කිරීමේ හැකියාවට බලපායි. බිල්ට් වෙබ් විශේෂාංගයක් භාවිතා කිරීම එම පෙරමුණෙහි වැදගත් ප්රතිලාභ සමඟ පැමිණේ:
HTML, CSS සහ JS දැනටමත් දන්නා සංවර්ධකයින්ට එම විශේෂාංගය පහසුවෙන් භාවිතා කිරීමට හැකි වනු ඇත, මන්ද එය හොඳින් ඒකාබද්ධ කිරීමට සහ සෙසු වෙබ් වේදිකාවට අනුකූල වීමට සැලසුම් කර ඇත. විශේෂාංගය භාවිතා කරන ආකාරයෙහි වෙනස්කම් හඳුන්වාදීමේ අවදානමක් නොමැත. එම විශේෂාංගය අත්හැර දැමීමේ හෝ නඩත්තු නොකිරීමේ අවදානම ශුන්යයට ආසන්නය.
බිල්ට් පෙදරේරු සම්බන්ධයෙන්, එය පිරිසැලසුම ප්රාථමික බැවින්, ඔබ එය CSS වෙතින් භාවිතා කරයි, Grid හෝ Flexbox වැනි, JS සම්බන්ධ නොවේ. එසේම, පරතරය වැනි වෙනත් පිරිසැලසුම් සම්බන්ධ CSS ගුණාංග, ඔබ බලාපොරොත්තු වන පරිදි ක්රියා කරයි. දැන ගැනීමට උපක්රම හෝ විසඳුම් නොමැති අතර, ඔබ ඉගෙන ගන්නා දේවල් MDN මත ලේඛනගත කර ඇත. Masonry JS lib සඳහා, ආරම්භ කිරීම තරමක් සංකීර්ණ වේ: තීරු සහ පරතරය ප්රමාණ සැකසීමට සැඟවුණු HTML මූලද්රව්ය සමඟ නිශ්චිත වාක්ය ඛණ්ඩයක් සහිත දත්ත ගුණාංගයක් අවශ්ය වේ. තවද, ඔබට තීරු විහිදීමට අවශ්ය නම්, ගැටළු මඟහරවා ගැනීම සඳහා ඔබ විසින්ම පරතරය ප්රමාණය ඇතුළත් කළ යුතුය:
< style> .track-sizer, .අයිතමය { පළල: 20%; } .ගටර්-සයිසර් { පළල: 1rem; } .අයිතමය { උස: 100px; margin-block-end: 1rem; } .item:nth-child(Odd) { උස: 200px; } .item--පළල2 { පළල: කැල්ක් (40% + 1rem); }
අපි මෙය ගොඩනඟන ලද පෙදරේරු ක්රියාත්මක කිරීම කෙබඳුදැයි සංසන්දනය කරමු: < style> .කන්ටේනරය { සංදර්ශකය: ජාලක මංතීරු; ජාලක මංතීරු: නැවත (4, 20%); පරතරය: 1rem; } .අයිතමය { උස: 100px; } .item:nth-child(Odd) { උස: 200px; } .item--පළල2 { ජාලක තීරුව: span 2; }
ජාලකයේ මෙන් span 2 සමඟ පරතරය සහ විහිදෙන පීලි සිදු කරන තැන් වැනි දේවල් භාවිතා කළ හැකි සරල, වඩාත් සංයුක්ත කේතය, සහ පරතරය ප්රමාණය ඇතුළත් නිවැරදි පළල ගණනය කිරීමට ඔබට අවශ්ය නොවේ. ලබා ගත හැකි දේ සහ එය ලබා ගත හැක්කේ කවදාද යන්න දැන ගන්නේ කෙසේද? සමස්තයක් වශයෙන්, ප්රශ්නය ඇත්ත වශයෙන්ම ඔබ JS පුස්තකාලයක් හරහා සාදන ලද පෙදරේරු භාවිතා කළ යුතුද යන්න නොවේ, නමුත් කවදාද යන්නයි. Masonry JS පුස්තකාලය විශ්මයජනක වන අතර වසර ගණනාවක් තිස්සේ වෙබ් වේදිකාවේ හිඩැසක් පුරවා ඇති අතර බොහෝ ප්රීතිමත් සංවර්ධකයින් සහ පරිශීලකයින් සඳහා. ඔබ එය ගොඩනඟන ලද පෙදරේරු ක්රියාත්මක කිරීමකට සංසන්දනය කළහොත් එහි අඩුපාඩු කිහිපයක් ඇත, නමුත් එම ක්රියාත්මක කිරීම සූදානම් නැතිනම් ඒවා වැදගත් නොවේ. මම බ්රවුසර වෙළෙන්දෙකුගේ සේවය කරන නිසා මෙම සිසිල් නව වෙබ් වේදිකා විශේෂාංග ලැයිස්තුගත කිරීම මට පහසු ය, එබැවින් මම පැමිණෙන්නේ කුමක්දැයි දැන ගැනීමට නැඹුරු වෙමි. නමුත් සංවර්ධකයින් බොහෝ විට බෙදාහදා ගනී, සමීක්ෂණයෙන් පසු සමීක්ෂණය, අලුත් දේවල් නිරීක්ෂණය කිරීම දුෂ්කර බව. දැනුවත්ව සිටීම දුෂ්කර වන අතර, සමාගම් සෑම විටම ඉගෙනීමට ප්රමුඛත්වය දෙන්නේ නැත. මේ සඳහා උදවු කිරීමට, ඔබට අවශ්ය තොරතුරු ඉක්මනින් ලබා ගැනීමට හැකි වන පරිදි සරල සහ සංයුක්ත ක්රමවලින් යාවත්කාලීන සපයන සම්පත් කිහිපයක් මෙන්න:
වෙබ් වේදිකාව ගවේෂක අඩවිය විශේෂාංගී කරයි: ඔබ එහි නිකුතු සටහන් පිටුව ගැන උනන්දු විය හැකිය. තවද, ඔබ RSS වලට කැමති නම්, නිකුතු සටහන් සංග්රහය, මෙන්ම Baseline Newly Available සහ Pidely Available feeds බලන්න.
වෙබ්වේදිකා තත්ව උපකරණ පුවරුව: ඔබ එහි විවිධ මූලික වසර පිටු වලට කැමති විය හැක.
Chrome Platform තත්ත්වයෙහි මාර්ග සිතියම පිටුව.
ඔබට තව ටිකක් කාලය තිබේ නම්, ඔබ බ්රවුසර වෙළෙන්දන්ගේ නිකුතු සටහන් ගැනද උනන්දු විය හැකිය:
Chrome දාරය ෆයර්ෆොක්ස් සෆාරි
ඊටත් වඩා සම්පත් සඳහා, මගේ වෙබ් වේදිකා Cheatsheet සංචාලනය බලන්න. මගේ දේ තවමත් ක්රියාත්මක නොවේ එය ගැටලුවේ අනෙක් පැත්තයි. ඔබ නිරීක්ෂණය කිරීමට කාලය, ශක්තිය සහ ක්රම සොයා ගත්තද, ඔබේ කටහඬ ඇසීම සහ ඔබේ ප්රියතම විශේෂාංග ක්රියාවට නැංවීම පිළිබඳව තවමත් කලකිරීමක් ඇත. සමහර විට ඔබ නිශ්චිත දෝෂයක් විසඳා ගැනීමට වසර ගණනාවක් බලා සිට ඇත, නැතහොත් එය තවමත් අතුරුදහන් වී ඇති බ්රවුසරයක නැව්ගත කිරීමට නිශ්චිත විශේෂාංගයක්. මම කියන්නම් බ්රව්සර් වෙළෙන්දන් සවන් දෙනවා. මම සංවර්ධක සංඥා සහ ප්රතිපෝෂණ නිතරම සාකච්ඡා කරන හරස්-සංවිධාන කණ්ඩායම් කිහිපයක කොටසක් වෙමි. අපි එක් එක් බ්රවුසර වෙළෙන්දාගේ අභ්යන්තර සහ බාහිර/පොදු සංසද, විවෘත මූලාශ්ර ව්යාපෘති, බ්ලොග් සහ සමීක්ෂණ යන විවිධ ප්රතිපෝෂණ මූලාශ්ර දෙස බලමු. තවද, අපි සැමවිටම උත්සාහ කරන්නේ සංවර්ධකයින්ට ඔවුන්ගේ නිශ්චිත අවශ්යතා බෙදා ගැනීමට සහ අවස්ථා භාවිතා කිරීමට වඩා හොඳ ක්රම නිර්මාණය කිරීමටයි. එබැවින්, ඔබට හැකි නම්, කරුණාකර බ්රවුසර වෙළෙන්දන්ගෙන් වැඩි යමක් ඉල්ලා ඔබට අවශ්ය විශේෂාංග ක්රියාත්මක කිරීමට අපට බලපෑම් කරන්න. කාලය ගත වන බව මට වැටහෙන අතර එය බිය ගැන්වීමටද හැකිය (ඇතුළත් වීමට ඉහළ බාධකයක් ගැන සඳහන් නොකළ යුතුය), නමුත් එයද ක්රියාත්මක වේ. ඔබට ඔබේ (හෝ ඔබේ සමාගමේ) හඬ ඇසීමට හැකි ක්රම කිහිපයක් මෙන්න: වාර්ෂික JS තත්ත්වය, CSS තත්ත්වය, සහ HTML සමීක්ෂණ තත්ත්වය ගන්න. බ්රවුසර වෙළෙන්දන් ඔවුන්ගේ කාර්යයට ප්රමුඛත්වය දෙන ආකාරය සම්බන්ධයෙන් ඔවුන් විශාල කාර්යභාරයක් ඉටු කරයි. ඔබට බ්රවුසර හරහා ස්ථිරව ක්රියාත්මක කිරීමට නිශ්චිත සම්මත පදනම් වූ API අවශ්ය නම්, ඊළඟ Interop ව්යාපෘති පුනරාවර්තනයේදී යෝජනාවක් ඉදිරිපත් කිරීම සලකා බලන්න. එයට වැඩි කාලයක් අවශ්ය වේ, නමුත් Shopify සහ RUMvision Interop 2026 සඳහා ඔවුන්ගේ පැතුම් ලැයිස්තු බෙදා ගත් ආකාරය සලකා බලන්න. බ්රවුසර වෙළෙන්දන්ට ප්රමුඛත්වය දීමට මෙවැනි විස්තරාත්මක තොරතුරු ඉතා ප්රයෝජනවත් විය හැක. බ්රවුසර වෙළෙන්දන්ට බලපෑම් කිරීමට වඩාත් ප්රයෝජනවත් සබැඳි සඳහා, මගේ වෙබ් වේදිකා වංචා පත්රිකාව සැරිසැරීම බලන්න. නිගමනය වසා දැමීම සඳහා, මෙම ලිපිය ඔබට සිතීමට කරුණු කිහිපයක් ඉතිරි කර ඇතැයි මම බලාපොරොත්තු වෙමි:
පෙදරේරු සඳහා උද්යෝගය සහ අනෙකුත් ඉදිරියට එන වෙබ් විශේෂාංග. ඔබට භාවිතා කිරීම ආරම්භ කිරීමට අවශ්ය විය හැකි වෙබ් විශේෂාංග කිහිපයක්. අභිරුචි හෝ තුන්වන පාර්ශ්ව කේත කොටස් කිහිපයක් ඔබට ගොඩනඟන ලද විශේෂාංග සඳහා ඉවත් කිරීමට හැකි වනු ඇත. බ්රවුසර වෙළෙන්දන්ට බලපෑම් කිරීමට සහ එන දේ ගැන සොයා බැලීමට ක්රම කිහිපයක්.
වඩාත් වැදගත් දෙය නම්, වෙබ් වේදිකාව එහි පූර්ණ විභවය සඳහා භාවිතා කිරීමේ ප්රතිලාභ පිළිබඳව මම ඔබට ඒත්තු ගැන්වූ බව මම බලාපොරොත්තු වෙමි.
