ቅድሚ 15 ዓመት ኣቢሉ ኣብ ሓደ ንወከልቲ ጉዕዞ፡ ንሰራሕተኛታት መዓርፎ ነፈርቲን ትካላት መንገዲ ኣየርን ዝኸውን ኣፕ ንሰርሕ ዝነበርና ትካል ይሰርሕ ነይረ። ብተወሳኺ ንናይ UI ኣካላትን ናይ ሓደ ገጽ ናይ ኣፕ ዓቕምታትን ናይ ገዛእ ርእስና ውሽጣዊ ፍሬምዎርክ ሃኒጽና። ንኹሉ ዝኸውን ክፍልታት ነይሩና፡ ዓውድታት፡ መጠወቒታት፡ ትቦታት፡ ደረጃታት፡ ዳታቴብል፡ ምኒዩ፡ ዕለት ምምራጽ፡ ምምራጽ፡ ከምኡ’ውን ብዙሕ ምምራጽ። ዋላ div component ነይሩና። ንእግረ መንገደይ div componentና ብሉጽ እዩ ነይሩ፡ ኣብ ኩሉ መርበብ ሓበሬታታት ክቡብ ኩርናዓት ክንገብር ኣኽኢሉና፡ እዚ ድማ እመኑ ኣይትእመኑ ኣብቲ እዋን ቀሊል ነገር ኣይነበረን።
ስራሕና ኣብ ታሪኽና ጄኤስ፡ ኣጃክስን ዳይናሚክ ኤችቲኤምኤልን ከም ናብ መጻኢ ዘብጽሓና ሰውራ ኣብ ዝረኣየሉ እዋን እዩ ተፈጺሙ። ሃንደበት፡ ንሓደ ገጽ ብዳይናሚክ መንገዲ ከነመሓይሾ፡ ካብ ሰርቨር ዳታ ክንረክብ፡ ናብ ካልኦት ገጻት ክንከይድ ንኽእል ኔርና፡ እዚ ድማ ከም ቀስ ኢሉ ዝረአን ኣብ መንጎ ክልቲኡ ገጻት ኣብ ስክሪን ዓቢ ጻዕዳ ርብዒ-ኣርባዕተ-መኣዝን ዘንጸባርቕን ነበረ። ሓንቲ ሓረግ ነይራ፣ ብጀፍ ኣትዉድ (መስራቲ ስታክኦቨርፍሎው) ህቡብ ዝገበረት፣ ንሳ ድማ ከምዚ ትብል ነበረት። “ዝኾነ ብጃቫስክሪፕት ክጽሓፍ ዝኽእል ኣፕሊኬሽን ኣብ መወዳእታ ብጃቫስክሪፕት ክጽሓፍ እዩ።”— ጀፍ ኣትዉድ
ኣብቲ እዋን እቲ እዚ ብጭቡጥ ከይድና ነቶም ኣፕስ ንምፍጣር ድፍረት ኮይኑ ተሰሚዑና። ኩሉ ነገር ምስ ጄኤስ ምግባር ከም ኮቦርታ ምጽዳቕ ኮይኑ ተሰሚዑኒ። ስለዚ ኩሉ ምስ ጄኤስ ኢና ጌርናዮ፣ ብሓቂ ድማ ግዜ ወሲድና ካልእ ኣገባባት ኣሰራርሓ ኣይንምርምርን። ብሓቂ ኤችቲኤምኤልን ሲኤስኤስን እንታይ ክገብሩ ከም ዝኽእሉ ብግቡእ ንኽንመሃር ድርኺት ኣይተሰምዓናን። ብሓቂ ንመርበብ ሓበሬታ ከም ሓደ ዝምዕብል ዘሎ ኣፕ ፕላትፎርም ብሙሉኡ ኣይተረድኣናን። መብዛሕትኡ ግዜ ብፍላይ ኣብ ደገፍ መርበብ ሓበሬታ ክመጽእ ከሎ ክንሰርሓሉ ዝግበኣና ነገር ጌርና ኢና ንርእዮ ነይርና። ነገራት ንኽፍጸም ዝያዳ JS ጥራይ ክንድርብየሉ ንኽእል ኢና። ግዜ ወሲደ ብዛዕባ እቲ መርበብ ሓበሬታ ብኸመይ ከም ዝሰርሕን ኣብቲ መድረኽ እንታይ ከም ዝነበረን ዝያዳ ምፍላጠይ ምሓገዘኒ ድዩ? ብርግጽ፡ ምናልባት ብሓቂ ዘየድሊ ዕስለ ኮድ ክላጽዮ ይኽእል ነይረ። ግን፡ ኣብቲ እዋን’ቲ፡ ምናልባት ክንድኡ ኣይክኸውንን ይኽእል’ዩ። ርኢኻ ኣለኻ፡ ሽዑ ፍልልያት መርበብ ሓበሬታ ቁሩብ ትርጉም ዘለዎ እዩ ነይሩ። እዚ እዋን እዚ፡ ኢንተርነት ኤክስፕሎረር ገና ዓብላሊ መርበብ ሓበሬታ ዝነበረሉ እዋን ኮይኑ፡ ፋየርፎክስ ናይ ቀረባ ካልኣይ ኮይኑ፡ ብሰንኪ ክሮም ብቕልጡፍ ተፈታውነት እናወሰኸ ብምምጽኡ ግን ብጽሒት ዕዳጋ ክስእን ጀሚሩ። ክሮምን ፋየርፎክስን ኣብ ደረጃታት መርበብ ሓበሬታ ኣብ ምትእምማን ኣዝዮም ንፉዓት እኳ እንተነበሩ፡ ኣፕታትና ዝሰርሑሉ ዝነበሩ ከባቢታት ግን ንIE6 ንነዊሕ እዋን ክንድግፍ ነይሩና ማለት እዩ። ዋላ ንIE8 ክንድግፍ ኣብ ዝተፈቕደልናሉ እዋን፡ ኣብ መንጎ መርበብ ሓበሬታታት ብዙሕ ፍልልያት ክንገጥም ነይሩና። እዚ ጥራይ ዘይኮነስ እቲ ናይቲ እዋን መርበብ በቃ ልክዕ ኣብቲ መድረኽ ዝተሃንጸ ክንድኡ ዝኣክል ዓቕሚ ኣይነበሮን።
ቅልጡፍ ንቕድሚት ናብ ሎሚ። ነገራት ኣዝዩ ተቐይሩ እዩ። ካብ ዝኾነ እዋን ንላዕሊ ካብ ዝኾነ እዋን ንላዕሊ እዞም ዓቕምታት ኣለዉና ጥራይ ዘይኮነስ፡ ዝረኽብዎ ፍጥነት እውን ወሲኹ እዩ። እምበኣር ደጊመ እታ ሕቶ ክሓታ፡ ግዜ ወሲድካ ብዛዕባ እቲ መርበብ ሓበሬታ ብኸመይ ከም ዝሰርሕን ኣብቲ መድረኽ እንታይ ከም ዘሎን ዝያዳ ምፍላጥ ሎሚ ምሓገዘካ ድዩ? ፍጹም እወ። ሎሚ ንዌብ ፕላትፎርም ምርዳእን ምጥቃምን ምምሃር ኣብ ልዕሊ ካልኦት ዲቨሎፐራት ኣብ ዓቢ ብልጫ የእትወካ። ኣብ ኣፈጻጽማ፡ ተበጻሕነት፡ ምላሽ ምሃብ፡ ኩሎም ብሓባር ትሰርሕ ትኹን፡ ወይ ድማ ናይ UI ባህርያት ጥራይ ትሰድድ፡ ከም ሓላፍነታዊ መሃንድስ ክትገብሮ እንተደሊኻ፡ ንዓኻ ዝቐርቡ መሳርሒታት ምፍላጥ፡ ኣብ ዕላማኻ ብቕልጡፍን ብዝበለጸን ክትበጽሕ ይሕግዘካ። ገለ ድሕሪ ሕጂ ቤተ-መጻሕፍቲ ከየድልየካ ዝኽእል ነገራት ሎሚ ዳህሰስቲ እንታይ ከም ዝድግፉ ምፍላጥ እምበኣር፡ እቲ ሕቶ፡ እንታይ ክንገድፎ ንኽእል? ኣብ 2025 rounded corners ንምግባር div component የድልየና ድዩ? ብርግጽ ኣይንገብሮን ኢና። እቲ ዶብ-ራድየስ ዝበሃል ንብረት ኣብዚ እዋን እዚ ንልዕሊ 15 ዓመታት ብኹሎም ኣብዚ እዋን እዚ ኣብ ጥቕሚ ዝውዕሉ መርበብ ሓበሬታታት ይድገፍ ነይሩ። ከምኡ’ውን ቅርጺ ኩርናዕ’ውን ኣብ ቀረባ እዋን ይመጽእ ኣሎ፡ ንዝያዳ ፋንሲየር ኩርናዓት። እስከ ሕጂ ኣብ ኩሎም ዓበይቲ ዳህሰስቲ ዝርከቡ ብተዛማዲ ናይ ቀረባ እዋን ባህርያት ንርአ፣ ከምኡ’ውን ኣብ ኮድቤዝካ ንዘለዉ ጽግዕተኛታት ንምትካእ ክትጥቀመሎም እትኽእል። እቲ ቁምነገር ብቕጽበት ንኹሎም እትፈትዎም ቤተ-መጻሕፍትኻ ጐዲልካ ንኮድቤዝካ ዳግማይ ምጽሓፍ ኣይኮነን። እንተ’ቲ ካልእ ኩሉ፡ መጀመርታ ደገፍ መርበብ ሓበሬታ ኣብ ግምት ከተእትዎን ኣብ ካልእ ንፕሮጀክትካ ዝምልከት ረቛሒታት ተመርኲስካ ክትውስንን ከድልየካ’ዩ። እዞም ዝስዕቡ ባህርያት ኣብተን ሰለስተ ቀንዲ ሞተር መርበብ ሓበሬታ (ክሮሚየም፣ ዌብኪትን ጌኮን) ይትግበሩ፣ እንተኾነ ግን ብኡንብኡ ንኸይትጥቀመሎም ዝኽልክሉ ዝተፈላለዩ ናይ መርበብ ሓበሬታ ደገፍ ጠለባት ክህልዉኻ ይኽእሉ እዮም። ሕጂ ግን ብዛዕባ እዞም ባህርያት እዚኣቶም ክትመሃረሉ እትኽእል ጽቡቕ ግዜ እዩ፣ ምናልባት እውን ኣብ ሓደ እዋን ክትጥቀመሎም መደብ ንግበር። ፖፖቨርስን ዝርርባትን ፖፖቨር ኤፒኣይ፡
ብርግጽ፡ ፍጥነት ምትእስሳር ኢንተርነትካ’ውን ወሲኹ ክኸውን ይኽእል’ዩ፡ ግን ንኹሉ ሰብ ከምኡ ኣይኮነን። ከምኡ’ውን ኩሉ ሰብ’ውን ሓደ ዓይነት ናይ መሳርሒ ዓቕሚ የብሉን። ኣብ ክንድኡ፡ በቲ መድረኽ ክትገብሮም እትኽእል ነገራት ናይ ሳልሳይ ወገን ኮድ ምስሓብ፡ ምናልባት ዝያዳ ኮድ ትሰድድ ማለት እዩ፡ ስለዚ ድማ ካብቲ ንቡር ንላዕሊ ውሑዳት ዓማዊል ትበጽሕ ማለት እዩ። ኣብ መርበብ ሓበሬታ ሕማቕ ናይ ጽዕነት ኣፈጻጽማ ናብ ዓቢ ናይ ምሕዳግ ደረጃታት የስዕብን ንዝና ምልክት ንግዲ ይጎድእን እዩ። ኣብ መሳርሒታት ውሑድ ኮድ ምዝዋር ብተወሳኺ፡ እቲ ኣብ መሳርሒታት ዓማዊልካ እትሰዶ ኮድ፡ ኣብ ልዕሊ’ቲ መድረኽ ውሑድ ጃቫስክሪፕት ኣብስትራክሽን እንተተጠቒሙ፡ ዝቐልጠፈ ክሰርሕ ተኽእሎ ኣሎ። ምናልባት’ውን ብነባሪ ዝያዳ ምላሽ ዝህብን ዝያዳ ተበጻሒን’ዩ። እዚ ኩሉ ድማ ናብ ዝያዳን ሕጉሳትን ዓማዊል ይመርሕ። መሳርሕተይ ኣሌክስ ራስል ዓመታዊ ናይ ኣፈጻጽማ ዘይምዕሩይነት ክፍተት ብሎግ ርኣዩ፣ እዚ ብሎግ እዚ ብሰንኪ ዘይማዕርነት ሃብቲ ፕሪምየም መሳርሒታት ብዓቢኡ ኣብ ቢልዮናት ተጠቀምቲ ዘለዎም ዕዳጋታት ከምዘየለዉ ዘርኢ እዩ። እዚ ክፍተት እዚ ድማ ምስ ግዜ እናዓበየ ጥራይ እዩ ዝኸይድ ዘሎ።
ኣብ ውሽጢ ዝተሃንጸ ኣቀማምጣ ማሶንሪ ሓደ ኣብ ቀረባ እዋን ዝመጽእን ኣዝየ ዝሕጐሰሉን ናይ ዌብ ፕላትፎርም ባህሪ CSS Masonry’ዩ።
ማሶንሪ እንታይ ምዃኑ ብምግላጽ ክጅምር። ምህናጽ እንታይ እዩ። ምህናጽ ቅድሚ ዓመታት ብፒንተርስት ህቡብ ዝኾነ ዓይነት ኣቀማምጣ እዩ። ንብረት ብዝተኻእለ መጠን ናብ መጀመርታ ናይቲ ትራክ ቀሪቦም ኣብ ውሽጦም ዝዕሽጉሉ ነጻ ትራክ ትሕዝቶ ይፈጥር።
ብዙሓት ሰባት ንማሶንሪ ከም ዓቢ ኣማራጺ ንፖርትፎሊዮታትን ፎቶ ጋለሪታትን ይርእይዎ፣ እዚ ድማ ብርግጽ ክገብሮ ይኽእል እዩ። ግን ማሶንሪ ካብቲ ኣብ ፒንተርስት እትርእዮ ዝያዳ ተዓጻጻፊ’ዩ፡ ኣብ ፏፏቴ ዝመስል ኣቀማምጣ ጥራይ ዝተሓጽረ’ውን ኣይኮነን። ኣብ ሓደ ናይ ማሶንሪ ኣቀማምጣ፤
ትራክ ዓምድታት ወይ መስርዕ ክኾኑ ይኽእሉ፤
ትራክ ትሕዝቶ ኩሎም ሓደ ዓይነት ዓቐን ክህልዎም የብሉን፤
ኣቑሑት ንብዙሕ ትራክታት ክሽፍኑ ይኽእሉ፤
ኣቑሑት ኣብ ፍሉይ ትራክ ክቕመጡ ይኽእሉ፤ ኩሉ ግዜ ነቲ ኣውቶማቲክ ምቕማጥ ኣልጎሪዝም ክኽተሉ ኣየድልዮምን’ዩ፤
ዲሞስ ኣብ ቀረባ እዋን ዝመጽእ ኣተገባብራ CSS Masonry in Chromium ብምጥቃም ዝገበርክዎም ውሑዳት ቀለልቲ ዲሞታት እነሆ። ናይ ፎቶ ጋለሪ ዲሞ፣ ከመይ ጌሮም ኣቑሑት (ኣብዚ ጉዳይ እዚ ኣርእስቲ) ንብዙሓት ትራክታት ክሽፍኑ ከም ዝኽእሉ ዘርኢ፤
ካልእ ዝተፈላለየ ዓቐን ዘለዎም ትራክታት ዘርኢ ፎቶ ጋለሪ፤
ገለ ትራክ ካብ ካልኦት ዝሰፍሑ ኣቀማምጣ መርበብ ሓበሬታ፡ ገለ ነገራት ድማ ንብምሉኡ ስፍሓት ናይቲ ኣቀማምጣ ዝሽፍኑ፤
ኣቑሑት ኣብ ፍሉይ ትራክ ክቕመጡ ከም ዝኽእሉ ዘርኢ ካንባን ቦርድ፤
መተሓሳሰቢ፡ እቲ...ቅድሚ ሕጂ ዝነበሩ ዲሞታት ብናይ ክሮሚየም ስሪት ዝተሰርሑ ኮይኖም ገና ንመብዛሕትኦም ተጠቀምቲ መርበብ ሓበሬታ ዘይተረኽበ’ዮም፣ ምኽንያቱ CSS Masonry ኣብ መርበብ ሓበሬታታት ክትግበር ገና ጀሚሩ’ሎ። ይኹን እምበር፡ ዌብ ዲቨሎፐራት ድሮ ንዓመታት ብሓጎስ ቤተ-መጻሕፍቲ ተጠቒሞም ኣቀማምጣ ማሶንሪ ክፈጥሩ ጸኒሖም እዮም። ሎሚ ንማሶንሪ ዝጥቀሙ ሳይታት ብርግጽ ኣብዚ እዋን’ዚ ኣብ መርበብ ሓበሬታ ማሶንሪ ኣዝዩ ልሙድ እዩ። ብዘይካ ፒንተርስት ዝረኸብክዎም ውሑዳት ኣብነታት እነሆ፤
ከምኡ’ውን ውሑዳት ካልኦት፡ ብዙሕ ዘይርኡያት ኣብነታት፤
ስለዚ፡ እዞም ኣቀማምጣታት ብኸመይ ተፈጢሮም? መፍትሒታት ሓደ ክጥቀመሉ ዝረኣኹዎ ብልሓት ኣብ ክንድኡ ፍሌክስቦክስ ኣቀማምጣ ምጥቃም፡ ኣንፈቱ ናብ ዓምዲ ምቕያር፡ ከምኡ’ውን ናብ ምጥቕላል ምቕማጥ’ዩ። በዚ መንገዲ እዚ፡ ዝተፈላለየ ቁመት ዘለዎም ነገራት ኣብ ብዙሓት፡ ነጻ ዓምድታት ከተቐምጦም ትኽእል ኢኻ፡ እዚ ድማ ናይ ማሶንሪ ኣቀማምጣ ጦብላሕታ ይህብ፤
ምስዚ መፍትሒ ግን ክልተ ድሩትነት ኣለዉ፤
ቅደም ተኸተል ኣቑሑት ካብቲ ምስ ሓቀኛ ኣቀማምጣ ማሶንሪ ዝህልዎ ዝተፈልየ እዩ። ምስ ፍሌክስቦክስ፡ ኣቑሑት መጀመርታ ነቲ ቀዳማይ ዓምዲ ይመልእዎ’ሞ፡ ምስ መልአ፡ ድሕሪኡ ናብ ዝቕጽል ዓምዲ ይኸዱ። ምስ ማሶንሪ፡ ኣቑሑት ኣብ ዝኾነ ትራክ (ወይ ዓምዲ ኣብዚ ጉዳይ) ዝያዳ ቦታ ምተደራረቡ። ግን እውን፣ ምናልባት እውን ብዝያዳ ኣገዳሲ ዝኾነ፣ እዚ መፍትሒ መፍትሒ ኣብ ፍሌክስቦክስ ኮንተይነር ውሱን ቁመት ከተቐምጥ ይጠልብ፤ እንተዘይኮይኑ ዝኾነ ምጥቕላል ኣይምተፈጥረን።
ሳልሳይ ወገን ቤተ-መጻሕፍቲ ምህናጽ ንዝያዳ ምዕቡላት ጉዳያት፡ ዲቨሎፐራት ቤተ-መጻሕፍቲ ክጥቀሙ ጸኒሖም እዮም። ነዚ ዝፍለጥን ተፈታዊን ቤተ-መጻሕፍቲ ብቐሊሉ ማሶንሪ ይበሃል፡ ብመሰረት ኤንፒኤም ድማ ኣብ ሰሙን ኣስታት 200 ሽሕ ግዜ ይወርድ። ስኩዌርስፔስ ንኣቀማምጣ ማሶንሪ ዝህብ ናይ ኣቀማምጣ ክፍሊ እውን ይህብ፣ ንዘይኮድ ኣማራጺ፣ ብዙሓት ሳይታት ድማ ይጥቀሙሉ። ክልቲኦም እዞም ኣማራጺታት ኣብቲ ኣቀማምጣ ነገራት ንምቕማጥ ኮድ ጃቫስክሪፕት ይጥቀሙ። ኣብ ውሽጢ ዝተሃንጸ ማሶንሪ ሕጂ ማሶንሪ ኣብ መርበብ ሓበሬታታት ከም ኣብ ውሽጡ ዝተሃንጸ ናይ CSS ባህሪ ክቐርብ ምጅማሩ ናይ ብሓቂ ተሓጒሰ። ምስ ግዜ ልክዕ ከምቲ ግሪድ ወይ ፍሌክስቦክስ እትጥቀመሉ ማሶንሪ ክትጥቀመሉ ትኽእል ኢኻ ማለት ዝኾነ መፍትሒ ወይ ሳልሳይ ወገን ኮድ ከየድለየካ። ኣብ ማይክሮሶፍት ዝሰርሕ ጉጅለይ ኣብቲ ኤጅ፡ ክሮምን ካልኦት ብዙሓት ዳህሰስቲን ዝተመርኮሰሉ ፕሮጀክት ክፉት ምንጪ ክሮሚየም፡ ኣብ ውሽጡ ዝተሃንጸ ናይ ማሶንሪ ደገፍ ከተተግብር ጸኒሓ እያ። ሞዚላ ብሓቂ ናይ መጀመርታ ሸያጢ መርበብ ሓበሬታ እዩ ነይሩ ንፈተነ ኣተገባብራ ማሶንሪ ኣብ 2020 ዝብል ሓሳብ ዘቕረበ።ከምኡ ውን ኣፕል ነዚ ሓድሽ ኣቀማምጣ መርበብ ሓበሬታ ቀዳማይ ደረጃ ንኽፍጸም ኣዝዩ ተገዳስነት ነይርዎ። እቲ ነቲ ባህሪ ደረጃ ንምሃብ ዝግበር ስራሕ እውን ንቕድሚት ይኸይድ ኣሎ፣ ኣብ ውሽጢ ጉጅለ ስራሕ ሲኤስኤስ ብዛዕባ ሓፈሻዊ ኣንፈት ስምምዕ ኣሎ፣ ዋላ’ውን ሓድሽ ዓይነት ምርኢት ምርኢት: ግሪድ-ሌንስ። ብዛዕባ ማሶንሪ ዝያዳ ክትፈልጡን ምዕባለ ክትከታተሉን ምስ እትደልዩ፡ ኣብ ገጸይ CSS Masonry resources ርኣዩ። ድሕሪ ግዜ፡ ማሶንሪ ልክዕ ከም ግሪድ ወይ ፍሌክስቦክስ፡ መሰረታዊ ባህሪ ምስ ኮነ፡ ብቐሊሉ ክንጥቀመሉን ካብዚ ክንጥቀምን ክንክእል ኢና፤
ዝሓሸ ኣፈፃፅማ፣ ዝሓሸ ምላሽ ምሃብ፣ ንኣጠቓቕማ ምቕሉልን ዝቐለለን ኮድን ።
ነዚኦም ብደቂቕ ንርኣዮም። ዝሓሸ ኣፈፃፅማ ስራሕ ናይ ገዛእ ርእስኻ Masonry ዝመስል ኣቀማምጣ ስርዓት ምግባር፡ ወይ’ውን ኣብ ክንድኡ ናይ ሳልሳይ ወገን ቤተ-መጻሕፍቲ ምጥቃም፡ ኣብ ስክሪን ነገራት ንምቕማጥ ኮድ ጃቫስክሪፕት ከተካይድ ኣለካ ማለት’ዩ። እዚ ማለት እውን እዚ ኮድ render blocking ክኸውን እዩ ማለት እዩ። ብርግጽ፡ ወይ ዝኾነ ነገር ኣይክረአን’ዩ፡ ወይ’ውን ነገራት ኣብ ትኽክለኛ ቦታ ወይ’ውን ኣብ ትኽክለኛ ዓቐን ኣይክህልዉን’ዮም፡ ክሳብ እቲ ኮድ ጃቫስክሪፕት ዝሰርሕ። መብዛሕትኡ ግዜ ኣቀማምጣ ማሶንሪ ንቐንዲ ክፋል ናይ ሓደ መርበብ ሓበሬታ ይጥቀመሉ፣ እዚ ማለት እቲ ኮድ ንቐንዲ ትሕዝቶኻ ካብቲ ክህልዎ ዝኽእል ድሒሩ ክረአ ምገበሮ፣ እዚ ድማ ንLCP፣ ወይ Largest Contentful Paint metric ናትካ የጉድል፣ እዚ ድማ ኣብ ዝተረድአ ኣፈጻጽማን ምምሕያሽ ሞተር ምድላይን ዓቢ ተራ ይጻወት። ንቤተ-መጻሕፍቲ Masonry JS ብቐሊል ኣቀማምጣን ኣብ DevTools ስሉጥ 4G ምትእስሳር ብምምሳልን ፈቲነዮ። እቲ ቤተ-መጻሕፍቲ ብዙሕ ዓቢ ኣይኮነን (24KB, 7.8KB gzipped)፡ ግን ኣብ ትሕቲ ናይ ፈተነ ኩነታትይ ንኽጽዓን 600ms ወሲዱለይ። ንቤተ-መጻሕፍቲ ማሶንሪ ዝኸውን ነዊሕ ናይ 600ms ናይ ጽዕነት ግዜ ከም ዝነበረ ዘርኢ ናይ ኣፈጻጽማ ቅዳሕ፡ ከምኡ’ውን ከምኡ ክኸውን ከሎ ካልእ ናይ ምቕራጽ ንጥፈት ከም ዘየጋጠመ ዘርኢ እዩ፤
ብተወሳኺ፡ ድሕሪ እቲ ናይ መጀመርታ ናይ ምጽዓን ግዜ፡ ድሕሪኡ እቲ ዝወረደ ስክሪፕት ክትንተንን ክጥርነፍን ድሕሪኡ ክሰርሕን ነበሮ። እዚ ኩሉ ከምቲ ኣቐዲሙ ዝተገልጸ ንኣቀራርባ ናይቲ ገጽ ዝዓግት እዩ ነይሩ። ኣብ’ቲ መርበብ ሓበሬታ ዝተሃንጸ ኣተገባብራ ማሶንሪ እንተሃልዩ፡ ንጽዕኖን ንሰርሖን ስክሪፕት ኣይክህልወናን’ዩ። እቲ ሞተር መርበብ ሓበሬታ ኣብቲ ናይ መጀመርታ ስጉምቲ ምቕራብ ገጽ ጥራይ እዩ ናቱ ክገብር። ዝሓሸ ምላሽ ምሃብ ልክዕ ከምቲ ሓደ ገጽ መጀመርታ ክጽዓን ከሎ፡ ዓቐን ናይቲ መስኮት መርበብ ሓበሬታ ምቕያር፡ ነቲ ኣብቲ ገጽ ዘሎ ኣቀማምጣ እንደገና ምቕራብ ይመርሕ። ኣብ’ዚ እዋን’ዚ ግን፡ እቲ ገጽ ንቤተ-መጻሕፍቲ Masonry JS ዝጥቀም እንተኾይኑ፡ ነቲ ስክሪፕት ዳግማይ ምጽዓን ኣየድልን’ዩ፡ ምኽንያቱ ድሮ’ዩ።ኣብዚ። ይኹን እምበር እቲ ንነገራት ኣብ ትኽክለኛ ቦታታት ዘንቀሳቕስ ኮድ ክጎዪ ኣለዎ። ሕጂ እዚ ፍሉይ ቤተ-መጻሕፍቲ እቲ ገጽ ክጽዕን ከሎ ነዚ ንምግባር ኣዝዩ ቅልጡፍ ይመስል። ይኹን እምበር፡ ኣብ ምቕያር ዓቐን መስኮት ናብ ዝተፈላለየ ቦታ ክግዕዙ ኣብ ዘድልዮም እዋን፡ ነቶም ኣቑሑት ህያው ይገብሮም፡ እዚ ድማ ዓቢ ለውጢ የምጽእ። ብርግጽ ተጠቀምቲ ከምቲ ንሕና ዲቨሎፐራት እንገብሮ መጠን ንመስኮት መርበብ ሓበሬታኦም ኣብ ምቕያር ግዜ ኣየሕልፉን’ዮም። እዚ ተንቀሳቓሲ ናይ ምቕያር ዓቐን ተመክሮ ግን ቁሩብ ጀርሪንግ ክኸውን ይኽእል እዩ፡ ነቲ ገጽ ምስቲ ሓድሽ ዓቐኑ ንኽላመድ ዝወስዶ ዝግመት ግዜ ድማ ይውስኸሉ። ምቕሉል ኣጠቓቕማን ዝቐለለ ኮድን ዌብ ፊቸር ምጥቃም ክሳብ ክንደይ ቀሊል ምዃኑን እቲ ኮድ ክሳብ ክንደይ ቀሊል ከም ዝመስልን ንጋንታኻ ዓቢ ለውጢ ከምጽኡ ዝኽእሉ ኣገደስቲ ረቛሒታት እዮም። ከምቲ ናይ መወዳእታ ተመኩሮ ተጠቃሚ ኣገደስቲ ክኾኑ ፈጺሞም ኣይክእሉን’ዮም፡ ብርግጽ፡ ተመኩሮ ዲቨሎፐር ግን ኣብ ምዕቃብ ጽልዋ ኣለዎ። ኣብ ውሽጢ ዝተሃንጸ ናይ መርበብ ሓበሬታ ባህሪ ምጥቃም ኣብቲ ግንባር ኣገደስቲ ረብሓታት ኣለዎ፤
ድሮ ኤችቲኤምኤል፡ ሲኤስኤስን ጀይኤስን ዝፈልጡ ዲቨሎፐራት፡ ነቲ ባህሪ ብቐሊሉ ክጥቀሙሉ ዝኽእሉሉ ምኽንያት፡ ጽቡቕ ጌሩ ክውሃሃድን ምስ ዝተረፈ መርበብ ሓበሬታ መድረኽ ክሰማማዕን ስለ ዝተዳለወ’ዩ። ኣብ’ቲ ባህሪ ብኸመይ ከም ዝጥቀመሉ ለውጢ ናይ ምብታኽ ሓደጋ የለን። እቲ ባህሪ’ቲ ናይ ምጥፋእ ወይ ዘይተሓለወ ሓደጋ ዳርጋ ዜሮ’ዩ።
ኣብ ጉዳይ built-in Masonry፡ layout primitive ስለ ዝኾነ፡ ካብ CSS ኢኻ ትጥቀመሉ፡ ልክዕ ከም Grid ወይ Flexbox፡ ዝኾነ JS ኣይሳተፍን። ከምኡ’ውን ካልኦት ምስ ኣቀማምጣ ዝተኣሳሰሩ ናይ CSS ባህርያት፡ ከም ክፍተት፡ ከምቲ ትጽበዮ ይሰርሑ። ክትፈልጦ ዘለካ ብልሓት ወይ መፍትሒ የለን፡ እቶም እትመሃሮም ነገራት ድማ ኣብ MDN ተሰኒዶም ኣለዉ። ንMasonry JS lib፡ ምጅማር ቁሩብ ዝተሓላለኸ እዩ: ፍሉይ ስነ-ቓል ዘለዎ ናይ ዳታ ባህሪ የድልዮ፣ ምስ ሕቡኣት ኤችቲኤምኤል ባእታታት ንዓቐናት ዓምድን ክፍተትን ንምቕማጥ። ተወሳኺ፡ ዓምድታት ክትስፍሕ እንተደሊኻ፡ ጸገም ንኸይፍጠር፡ ነቲ ናይ ክፍተት ዓቐን ባዕልኻ ከተካትቶ ኣለካ፤
<ቅዲ> ዝብል ጽሑፍ ኣሎ። .ትራክ-ሳይዘር፣ . .ኣቕሓ { . ስፍሓት: 20%፤ } .ጉተር-ሳይዘር { . ስፍሓት: 1ሬም፤ } .ኣቕሓ { . ቁመት: 100px፤ ወሰን-ብሎክ-መወዳእታ: 1rem; } .item:nth-child(odd) { . ቁመት: 200px፤ } .ኣቕሓ--ስፍሓት2 { . ስፍሓት: calc(40% + 1rem); } ዝብል ጽሑፍ ኣሎ።
ነዚ ምስ’ቲ ኣብ ውሽጡ ዝተሃንጸ ኣተገባብራ ማሶንሪ ከመይ ከም ዝመስል ነነጻጽሮ፤ <ቅዲ> ዝብል ጽሑፍ ኣሎ። .መትሓዚ { . ምርኢት: ሽቦ-መስመራት፤ ሽቦ-መስመራት: ምድግጋም(4, 20%)፤ ክፍተት: 1ሬም፤ } .ኣቕሓ { . ቁመት: 100px፤ } .item:nth-child(odd) { . ቁመት: 200px፤ } .ኣቕሓ--ስፍሓት2 { . ሽቦ-ዓምዲ: ስፓን 2፤ } ዝብል ጽሑፍ ኣሎ።
ቀሊልን ዝያዳ ውሱንን ኮድ ከም ክፍተት ዝኣመሰሉ ነገራት ጥራይ ክጥቀም ዝኽእልን ስፓኒንግ ትራክ ዝግበረሉ ቦታን ብስፓን 2 ዝፍጸመሉ፡ ልክዕ ከምቲ ኣብ ግሪድ ዝግበር፡ ከምኡ’ውን ንዓቐን ክፍተት ዘጠቓልል ቅኑዕ ስፍሓት ክትሕስብ ዘየድልየካ። እንታይ ከምዘሎን መዓስ ከምዝርከብን ብኸመይ ንፈልጥ? ብሓፈሻ እቲ ሕቶ ብሓቂ ኣብ ልዕሊ JS library built-in Masonry ክትጥቀም ኣለካ ድዩ ኣይኮነን ዘይኮነስ መዓስ’ዩ። ቤተ-መጻሕፍቲ ማሶንሪ ጄኤስ ዘገርምን ኣብ መርበብ ሓበሬታ ንነዊሕ ዓመታት ክፍተት ክመልእ ዝጸንሐን፡ ከምኡ’ውን ንብዙሓት ሕጉሳት ኣዳለውትን ተጠቀምትን እዩ። ምስ’ቲ ኣብ ውሽጡ ዝተሃንጸ ኣተገባብራ ማሶንሪ እንተ ኣነጻጺርካዮ ውሑዳት ጕድለታት ኣለዎ ብርግጽ፡ እቲ ኣተገባብራ ድሉው እንተዘይኮይኑ ግን እቶም ኣገደስቲ ኣይኮኑን። ኣብ ሓደ ሸያጢ መርበብ ሓበሬታ ስለ ዝሰርሕ፡ ነዞም ዝሑላት ሓደስቲ ናይ መርበብ ሓበሬታ መድረኽ ባህርያት ምዝርዛር ቀሊል’ዩ፡ ስለዚ ድማ እንታይ ከም ዝመጽእ ክፈልጥ’የ ዝፍትን። መብዛሕትኡ ግዜ ግን ኣዳለውቲ፡ ዳህሳስ ድሕሪ ዳህሳስ፡ ሓደስቲ ነገራት ምክትታል ከቢድ ምዃኑ ይካፈሉ። ሓበሬታ ምጽናሕ ኣጸጋሚ’ዩ፡ ብዝኾነ ኩባንያታት ድማ ኩሉ ግዜ ንትምህርቲ ቀዳምነት ኣይህባኦን’የን። ነዚ ንምሕጋዝ፡ ዘድልየካ ሓበሬታ ብቕልጡፍ ክትረክብ ብቐሊልን ውሱንን መንገዲ ሓድሽ ሓበሬታ ዝህቡ ውሑዳት ጸጋታት እነሆ፤
እቲ ዌብ ፕላትፎርም ኤክስፕሎረር ሳይት፤ ኣብ ገጽ ናይ ምውጻእ መዘኻኸሪታቱ ክትግደሱ ትኽእሉ ኢኹም። ከምኡ’ውን፡ RSS እንተፈቲኹም፡ ነቲ ናይ ምውጻእ መዘኻኸሪታት መግቢ፡ ከምኡ’ውን መሰረታዊ ሓድሽ ዝረኽብን ብሰፊሑ ዝርከብን መግቢ ርአ።
እቲ መርበብ ሓበሬታመድረኽ ኩነታት ዳሽቦርድ፤ ዝተፈላለዩ ናይ መሰረታዊ ዓመት ገጻታቱ ክትፈትዉ ትኽእሉ ኢኹም።
Chrome Platform Status’ ገጽ ፍኖተ-ካርታ።
ቁሩብ ዝያዳ ግዜ እንተሃልዩካ፡ ኣብ መዘኻኸሪታት ምውጻእ ሸየጥቲ መርበብ ሓበሬታ’ውን ክትግደስ ትኽእል ኢኻ፤
ክሮም ኤጅ ፋየርፎክስ ሳፋሪ
ንዝያዳ ጸጋታት፡ ናቪጌቲንግ ዘ ዌብ ፕላትፎርም ቺትሺት ርኣዩ። ናተይ ነገር ክሳብ ሕጂ ኣይተተግበረን። እቲ ካልእ ወገን ናይ’ቲ ጸገም’ውን ንሱ’ዩ። ዋላ’ውን ክትከታተለሉ እትኽእል ግዜን ጸዓትን መገድን እንተረኺብካ፡ ድምጽኻ ክስማዕን ዝፈትውዎ ባህርያት ኣብ ምትግባርን ገና ብስጭት ኣሎ። ምናልባት ሓደ ፍሉይ ስሕተት ክፍታሕ ንዓመታት ክትጽበ ጸኒሕካ ትኸውን፣ ወይ’ውን ፍሉይ ባህሪ ኣብ ሓደ ገና ዝጎደለሉ መርበብ ሓበሬታ ክትሰድድ ትኽእል። እቲ ክብሎ ዝደሊ ሸየጥቲ መርበብ ሓበሬታ ብርግጽ ይሰምዑ’ዮም። ኣነ ኣካል ናይ ሓያሎ ስግረ-ውዳበታት ዝሓቖፋ ጋንታታት’የ፡ ኣብኡ ድማ ኩሉ ግዜ ብዛዕባ ምልክታት ዲቨሎፐርን ግብረ መልስን ንዛተየሉ። ብዙሓት ዝተፈላለዩ ምንጪታት ርእይቶታት ንርኢ፣ ክልቲኦም ውሽጣዊ ኣብ ነፍሲ ወከፍ ሸያጢ መርበብ ሓበሬታን ግዳማዊ/ህዝብን ኣብ መድረኻት፣ ክፉት ምንጪ ፕሮጀክትታት፣ ብሎግን መጽናዕትታትን። ከምኡ’ውን፡ ኩሉ ግዜ ንደቨሎፐራት ፍሉይ ድሌታቶምን ኣጠቓቕማኦምን ዘካፍሉሉ ዝሓሸ መገድታት ክንፈጥር ንጽዕር ኣለና። ስለዚ፡ እንተኺኢልኩም፡ በጃኹም ካብ ሸየጥቲ መርበብ ሓበሬታ ዝያዳ ጠለቡን ዘድልየኩም ባህርያት ንምትግባር ጸቕጢ ግበሩና። ግዜ ከም ዝወስድ ይረክብ፣ ከምኡ’ውን ዘፍርሕ ክኸውን ከም ዝኽእል (ኣሽንኳይዶ ልዑል ዕንቅፋት ምእታው)፣ ግን ይሰርሕ’ውን እዩ። ድምጺካ (ወይ ናይ ትካልካ) ክስማዕ እትኽእለሉ ውሑዳት መንገድታት እዞም ዝስዕቡ እዮም፡ ዓመታዊ ናይ State of JS, State of CSS, ከምኡ’ውን State of HTML መጽናዕትታት ውሰድ። ሸየጥቲ መርበብ ሓበሬታ ንስራሖም ብኸመይ ቀዳምነት ከም ዝህብዎ ዓቢ ተራ ኣለዎም። ኣብ መላእ ዳህሰስቲ ብቐጻሊ ክትግበር ፍሉይ ደረጃ መሰረት ዝገበረ ኤፒኣይ እንተድኣ ኣድልዩካ፡ ኣብ ዝቕጽል ምድግጋም ፕሮጀክት ኢንተርፕ ሓሳብ ምቕራብ ኣብ ግምት ኣእቱ። ዝያዳ ግዜ ይሓትት፡ ግን Shopifyን RUMvisionን ንInterop 2026 ዝኸውን ዝርዝር ድሌታቶም ብኸመይ ከም ዘካፈሉ ኣብ ግምት ኣእትውዎ።ከምዚ ዝኣመሰለ ዝርዝር ሓበሬታ ንሸየጥቲ መርበብ ሓበሬታ ቀዳምነት ክህብዎ ኣዝዩ ጠቓሚ ክኸውን ይኽእል። ንዝያዳ ጠቐምቲ መላግቦታት ንሸየጥቲ መርበብ ሓበሬታ ንምጽላው፡ ናተይ Navigating the Web Platform Cheatsheet ርኣዩ። መደምደምታ ንምዕጻው እዚ ጽሑፍ ውሑዳት ክትሓስቡሉ ዘለኩም ነገራት ገዲፉልኩም ክኸውን ተስፋ እገብር፤
ንማሶንሪን ካልእ ዝመጽእ ናይ መርበብ ሓበሬታ ባህርያትን ፍናን እዩ። ውሑዳት ናይ መርበብ ሓበሬታ ባህርያት ክትጥቀመሎም ክትጅምር ትደሊ ትኸውን። ውሑዳት ቁንጣሮ ብሕታዊ ወይ 3ይ ወገን ኮድ ንውሽጢ ዝተሃንጹ ባህርያት ንምድጋፍ ከተውጽኦም ትኽእል ትኸውን። ገለ መንገድታት እንታይ ከም ዝመጽእ ክትከታተልን ንሸየጥቲ መርበብ ሓበሬታ ክትጸልዎምን።
ብዝያዳ ኣገዳሲ ዝኾነ ድማ፡ ነቲ መርበብ ሓበሬታ መድረኽ ብሙሉእ ዓቕሙ ምጥቃም ዘለዎ ረብሓ ኣእሚነኩም ክኸውን ተስፋ እገብር።
