சுமார் 15 ஆண்டுகளுக்கு முன்பு, நான் ஒரு நிறுவனத்தில் பணிபுரிந்தேன், அங்கு நாங்கள் பயண முகவர்கள், விமான நிலைய ஊழியர்கள் மற்றும் விமான நிறுவனங்களுக்கான பயன்பாடுகளை உருவாக்கினோம். UI கூறுகள் மற்றும் ஒற்றைப் பக்க பயன்பாட்டுத் திறன்களுக்காக எங்கள் சொந்த உள் கட்டமைப்பையும் நாங்கள் உருவாக்கினோம். எங்களிடம் அனைத்திற்கும் கூறுகள் உள்ளன: புலங்கள், பொத்தான்கள், தாவல்கள், வரம்புகள், தரவு அட்டவணைகள், மெனுக்கள், டேட்பிக்கர்ஸ், தேர்வுகள் மற்றும் பலதேர்வுகள். நாங்கள் கூட ஒரு div கூறு இருந்தது. எங்கள் div கூறு நன்றாக இருந்தது, எல்லா உலாவிகளிலும் வட்டமான மூலைகளைச் செய்ய இது எங்களுக்கு அனுமதித்தது, அதை நம்பினாலும் நம்பாவிட்டாலும், அந்த நேரத்தில் செய்வது எளிதான காரியம் அல்ல.
ஜேஎஸ், அஜாக்ஸ் மற்றும் டைனமிக் எச்டிஎம்எல் ஆகியவை நம்மை எதிர்காலத்திற்குக் கொண்டு வந்த ஒரு புரட்சியாகக் கருதப்பட்டபோது எங்கள் வரலாற்றின் ஒரு கட்டத்தில் எங்கள் பணி நடந்தது. திடீரென்று, நாம் ஒரு பக்கத்தை மாறும் வகையில் புதுப்பிக்கலாம், சர்வரிலிருந்து தரவைப் பெறலாம் மற்றும் பிற பக்கங்களுக்குச் செல்வதைத் தவிர்க்கலாம், இது மெதுவாகக் காணப்பட்டது மற்றும் இரண்டு பக்கங்களுக்கு இடையில் திரையில் ஒரு பெரிய வெள்ளை செவ்வகத்தை ஒளிரச் செய்தது. ஜெஃப் அட்வுட் (ஸ்டாக்ஓவர்ஃப்ளோவின் நிறுவனர்) பிரபலப்படுத்திய ஒரு சொற்றொடர் இருந்தது: "ஜாவாஸ்கிரிப்ட்டில் எழுதக்கூடிய எந்தவொரு பயன்பாடும் இறுதியில் ஜாவாஸ்கிரிப்ட்டில் எழுதப்படும்." - ஜெஃப் அட்வுட்
அந்த நேரத்தில் எங்களைப் பொறுத்தவரை, உண்மையில் சென்று அந்த பயன்பாடுகளை உருவாக்க இது ஒரு தைரியமாக இருந்தது. JS உடன் எல்லாவற்றையும் செய்ய ஒரு போர்வை ஒப்புதல் போல் உணர்ந்தேன். எனவே நாங்கள் JS உடன் அனைத்தையும் செய்தோம், மேலும் விஷயங்களைச் செய்வதற்கான பிற வழிகளை ஆராய்வதற்கு நாங்கள் உண்மையில் நேரத்தை எடுத்துக்கொள்ளவில்லை. HTML மற்றும் CSS என்ன செய்ய முடியும் என்பதை சரியாகக் கற்றுக்கொள்வதற்கான ஊக்கத்தை நாங்கள் உண்மையில் உணரவில்லை. வலையை முழுவதுமாக வளர்ந்து வரும் பயன்பாட்டு தளமாக நாங்கள் உண்மையில் உணரவில்லை. குறிப்பாக உலாவி ஆதரவுக்கு வரும்போது, நாங்கள் வேலை செய்ய வேண்டிய ஒன்றாகவே இதைப் பார்த்தோம். காரியங்களைச் செய்ய நாம் இன்னும் JS ஐ அதில் வீசலாம். இணையம் எவ்வாறு இயங்குகிறது மற்றும் பிளாட்ஃபார்மில் என்ன கிடைக்கிறது என்பதைப் பற்றி மேலும் அறிய நேரம் ஒதுக்குவது எனக்கு உதவுமா? நிச்சயமாக, உண்மையிலேயே தேவையில்லாத ஒரு சில குறியீட்டை நான் ஷேவ் செய்திருக்கலாம். ஆனால், அந்த நேரத்தில், ஒருவேளை இல்லை. நீங்கள் பார்க்கிறீர்கள், உலாவி வேறுபாடுகள் அப்போது மிகவும் குறிப்பிடத்தக்கவை. இன்டர்நெட் எக்ஸ்புளோரர் இன்னும் மேலாதிக்க உலாவியாக இருந்த காலம் இது, பயர்பாக்ஸ் இரண்டாவது இடத்தில் இருந்தது, ஆனால் குரோம் வேகமாக பிரபலமடைந்து வருவதால் சந்தைப் பங்கை இழக்கத் தொடங்கியது. குரோம் மற்றும் பயர்பாக்ஸ் இணைய தரநிலைகளை ஏற்றுக்கொள்வதில் மிகச் சிறந்தவை என்றாலும், எங்கள் பயன்பாடுகள் இயங்கும் சூழல்கள் நீண்ட காலத்திற்கு IE6 ஐ ஆதரிக்க வேண்டும் என்பதாகும். IE8 ஐ ஆதரிக்க நாங்கள் அனுமதிக்கப்பட்டிருந்தாலும், உலாவிகளுக்கு இடையே நிறைய வேறுபாடுகளை நாங்கள் இன்னும் சமாளிக்க வேண்டியிருந்தது. அதுமட்டுமல்லாமல், அந்த காலத்தின் வலையில் அவ்வளவு திறன்கள் மேடையில் கட்டமைக்கப்படவில்லை.
இன்றைக்கு வேகமாக முன்னேறுங்கள். விஷயங்கள் பெரிதும் மாறிவிட்டன. முன்பை விட எங்களிடம் இந்த திறன்கள் அதிகமாக இருப்பது மட்டுமல்லாமல், அவை கிடைக்கும் விகிதமும் அதிகரித்துள்ளது. நான் மீண்டும் கேள்வியைக் கேட்கிறேன்: இணையம் எவ்வாறு இயங்குகிறது மற்றும் மேடையில் என்ன கிடைக்கிறது என்பதைப் பற்றி மேலும் அறிய நேரம் ஒதுக்குவது இன்று உங்களுக்கு உதவுமா? முற்றிலும் ஆம். இன்று இணைய தளத்தைப் புரிந்துகொள்ளவும் பயன்படுத்தவும் கற்றுக்கொள்வது மற்ற டெவலப்பர்களைக் காட்டிலும் உங்களுக்கு ஒரு பெரிய நன்மையை அளிக்கிறது. செயல்திறன், அணுகல்தன்மை, பதிலளிக்கக்கூடிய தன்மை, அனைத்தையும் ஒன்றாகச் செய்தாலும் அல்லது UI அம்சங்களை ஷிப்பிங் செய்தாலும், நீங்கள் ஒரு பொறுப்பான பொறியியலாளராக அதைச் செய்ய விரும்பினால், உங்களிடம் இருக்கும் கருவிகளை அறிந்துகொள்வது உங்கள் இலக்குகளை விரைவாகவும் சிறப்பாகவும் அடைய உதவுகிறது. சில விஷயங்கள் உங்களுக்கு இனி நூலகம் தேவையில்லை இன்று என்ன உலாவிகள் ஆதரிக்கின்றன என்பதை அறிந்தால், கேள்வி: நாம் எதைத் தள்ளிவிடலாம்? 2025 இல் வட்டமான மூலைகளைச் செய்ய எங்களுக்கு ஒரு div கூறு தேவையா? நிச்சயமாக, நாங்கள் இல்லை. இந்த கட்டத்தில் 15 ஆண்டுகளுக்கும் மேலாக தற்போது பயன்படுத்தப்படும் அனைத்து உலாவிகளாலும் எல்லை-ஆரம் பண்பு ஆதரிக்கப்படுகிறது. மேலும் ஃபேன்சியர் கார்னர்களுக்கு, கார்னர்-ஷேப்பும் விரைவில் வருகிறது. இப்போது அனைத்து முக்கிய உலாவிகளிலும் கிடைக்கும் ஒப்பீட்டளவில் சமீபத்திய அம்சங்களைப் பார்ப்போம், மேலும் உங்கள் கோட்பேஸில் இருக்கும் சார்புகளை மாற்றுவதற்கு நீங்கள் பயன்படுத்தலாம். உங்கள் அன்பான நூலகங்கள் அனைத்தையும் உடனடியாகத் தள்ளிவிட்டு, உங்கள் கோட்பேஸை மீண்டும் எழுதுவது அல்ல. மற்ற அனைத்தையும் பொறுத்தவரை, நீங்கள் முதலில் உலாவி ஆதரவை கணக்கில் எடுத்துக்கொள்ள வேண்டும் மற்றும் உங்கள் திட்டத்திற்கு குறிப்பிட்ட பிற காரணிகளின் அடிப்படையில் முடிவு செய்ய வேண்டும். பின்வரும் அம்சங்கள் மூன்று முக்கிய உலாவி என்ஜின்களில் (Chromium, WebKit மற்றும் Gecko) செயல்படுத்தப்பட்டுள்ளன, ஆனால் அவற்றை உடனடியாகப் பயன்படுத்துவதைத் தடுக்கும் வெவ்வேறு உலாவி ஆதரவுத் தேவைகள் உங்களிடம் இருக்கலாம். இந்த அம்சங்களைப் பற்றி அறிய இப்போது இன்னும் நல்ல நேரம், இருப்பினும், சில சமயங்களில் அவற்றைப் பயன்படுத்தத் திட்டமிடலாம். Popovers மற்றும் உரையாடல்கள் Popover API,
நிச்சயமாக, உங்கள் இணைய இணைப்பு வேகம் கூட இருக்கலாம், ஆனால் அது அனைவருக்கும் பொருந்தாது. மேலும் அனைவருக்கும் ஒரே மாதிரியான சாதன திறன்கள் இல்லை. பிளாட்ஃபார்ம் மூலம் நீங்கள் செய்யக்கூடிய விஷயங்களுக்கு மூன்றாம் தரப்புக் குறியீட்டை இழுப்பது, அதற்குப் பதிலாக, நீங்கள் அதிகக் குறியீட்டை அனுப்புகிறீர்கள் என்று அர்த்தம், எனவே நீங்கள் வழக்கத்தை விட குறைவான வாடிக்கையாளர்களை அடைவீர்கள். இணையத்தில், மோசமான ஏற்றுதல் செயல்திறன் பெரிய கைவிடுதல் விகிதங்களுக்கு வழிவகுக்கிறது மற்றும் பிராண்ட் நற்பெயரை பாதிக்கிறது. சாதனங்களில் குறைவான குறியீடு இயங்குகிறது மேலும், பிளாட்ஃபார்மின் மேல் குறைவான ஜாவாஸ்கிரிப்ட் சுருக்கங்களைப் பயன்படுத்தினால், உங்கள் வாடிக்கையாளர்களின் சாதனங்களில் நீங்கள் அனுப்பும் குறியீடு வேகமாக இயங்கும். இது மிகவும் பதிலளிக்கக்கூடியது மற்றும் இயல்பாகவே அணுகக்கூடியது. இவை அனைத்தும் அதிக மற்றும் மகிழ்ச்சியான வாடிக்கையாளர்களுக்கு வழிவகுக்கிறது. எனது சக ஊழியரான அலெக்ஸ் ரஸ்ஸலின் வருடாந்திர செயல்திறன் ஏற்றத்தாழ்வு இடைவெளி வலைப்பதிவைச் சரிபார்க்கவும், இது செல்வச் சமத்துவமின்மை காரணமாக பில்லியன் கணக்கான பயனர்களைக் கொண்ட சந்தைகளில் பிரீமியம் சாதனங்கள் பெரும்பாலும் இல்லை என்பதைக் காட்டுகிறது. மேலும் இந்த இடைவெளி காலப்போக்கில் அதிகரித்து வருகிறது.
உள்ளமைக்கப்பட்ட கொத்து தளவமைப்பு விரைவில் வரவிருக்கும் ஒரு இணைய தள அம்சம் மற்றும் நான் மிகவும் உற்சாகமாக இருப்பது CSS மேசன்ரி ஆகும்.
கொத்து என்றால் என்ன என்பதை விளக்கி ஆரம்பிக்கிறேன். கொத்து என்றால் என்ன கொத்து என்பது பல ஆண்டுகளுக்கு முன்பு Pinterest ஆல் பிரபலப்படுத்தப்பட்ட ஒரு வகை தளவமைப்பு ஆகும். இது உள்ளடக்கத்தின் சுயாதீன டிராக்குகளை உருவாக்குகிறது, அதில் உருப்படிகள் தங்களால் முடிந்தவரை பாதையின் தொடக்கத்திற்கு அருகில் தங்களைக் கட்டிக்கொள்ளும்.
போர்ட்ஃபோலியோக்கள் மற்றும் புகைப்பட கேலரிகளுக்கு கொத்து வேலை ஒரு சிறந்த தேர்வாக பலர் பார்க்கிறார்கள், அதை நிச்சயமாக செய்ய முடியும். ஆனால் நீங்கள் Pinterest இல் பார்ப்பதை விட கொத்து மிகவும் நெகிழ்வானது, மேலும் இது நீர்வீழ்ச்சி போன்ற தளவமைப்புகளுக்கு மட்டுப்படுத்தப்படவில்லை. ஒரு கொத்து அமைப்பில்:
தடங்கள் நெடுவரிசைகள் அல்லது வரிசைகளாக இருக்கலாம்:
உள்ளடக்கத்தின் ட்ராக்குகள் அனைத்தும் ஒரே அளவில் இருக்க வேண்டியதில்லை:
உருப்படிகள் பல தடங்களில் பரவலாம்:
பொருட்களை குறிப்பிட்ட தடங்களில் வைக்கலாம்; அவர்கள் எப்போதும் தானியங்கி வேலை வாய்ப்பு வழிமுறையைப் பின்பற்ற வேண்டியதில்லை:
டெமோக்கள் CSS Masonry இன் வரவிருக்கும் செயலாக்கத்தைப் பயன்படுத்தி Chromium இல் நான் உருவாக்கிய சில எளிய டெமோக்கள் இங்கே உள்ளன. ஒரு புகைப்பட கேலரி டெமோ, உருப்படிகள் (இந்த வழக்கில் தலைப்பு) பல தடங்களை எவ்வாறு பரப்பலாம் என்பதைக் காட்டுகிறது:
வெவ்வேறு அளவுகளின் தடங்களைக் காட்டும் மற்றொரு புகைப்படத் தொகுப்பு:
ஒரு செய்தி தள தளவமைப்பு மற்றவற்றை விட அகலமான சில தடங்கள் மற்றும் தளவமைப்பின் முழு அகலத்தில் சில உருப்படிகள்:
குறிப்பிட்ட தடங்களில் பொருட்களை வைக்கலாம் என்பதைக் காட்டும் கான்பன் பலகை:
குறிப்பு: திமுந்தைய டெமோக்கள் CSS Masonry இப்போதுதான் உலாவிகளில் செயல்படுத்தப்படத் தொடங்கியுள்ளதால், பெரும்பாலான இணையப் பயனர்களுக்கு இன்னும் கிடைக்காத Chromium பதிப்பைக் கொண்டு உருவாக்கப்பட்டுள்ளது. இருப்பினும், வலை உருவாக்குநர்கள் ஏற்கனவே பல ஆண்டுகளாக கொத்து தளவமைப்புகளை உருவாக்க நூலகங்களை மகிழ்ச்சியுடன் பயன்படுத்தி வருகின்றனர். இன்று கொத்து வேலைகளைப் பயன்படுத்தும் தளங்கள் உண்மையில், கொத்து வேலை இன்று வலையில் மிகவும் பொதுவானது. Pinterest தவிர நான் கண்டறிந்த சில எடுத்துக்காட்டுகள் இங்கே:
மேலும் சில, குறைவான வெளிப்படையான, உதாரணங்கள்:
எனவே, இந்த தளவமைப்புகள் எவ்வாறு உருவாக்கப்பட்டன? தீர்வுகள் அதற்குப் பதிலாக ஃப்ளெக்ஸ்பாக்ஸ் தளவமைப்பைப் பயன்படுத்தி, அதன் திசையை நெடுவரிசையாக மாற்றி, அதை மடிக்க வைப்பது என்பது நான் பார்த்த ஒரு தந்திரம். இந்த வழியில், நீங்கள் பல்வேறு உயரங்களின் பொருட்களை பல, சுயாதீன நெடுவரிசைகளில் வைக்கலாம், இது ஒரு கொத்து தளவமைப்பின் தோற்றத்தை அளிக்கிறது:
இருப்பினும், இந்த தீர்வுக்கு இரண்டு வரம்புகள் உள்ளன:
பொருட்களின் வரிசை உண்மையான கொத்து தளவமைப்பிலிருந்து வேறுபட்டது. ஃப்ளெக்ஸ்பாக்ஸ் மூலம், உருப்படிகள் முதல் நெடுவரிசையை முதலில் நிரப்பவும், அது நிரம்பியதும், அடுத்த நெடுவரிசைக்குச் செல்லவும். கொத்தனார் மூலம், எந்த பாதையில் (அல்லது இந்த வழக்கில் நெடுவரிசை) அதிக இடம் கிடைக்கிறதோ, அதில் பொருட்கள் அடுக்கி வைக்கப்படும். ஆனால், ஒருவேளை மிக முக்கியமாக, இந்த தீர்விற்கு நீங்கள் Flexbox கொள்கலனுக்கு ஒரு நிலையான உயரத்தை அமைக்க வேண்டும்; இல்லையெனில், மடக்குதல் ஏற்படாது.
மூன்றாம் தரப்பு கொத்து நூலகங்கள் மேம்பட்ட நிகழ்வுகளுக்கு, டெவலப்பர்கள் நூலகங்களைப் பயன்படுத்துகின்றனர். இதற்கான மிகவும் பிரபலமான மற்றும் பிரபலமான நூலகம் கொத்தனார் என்று அழைக்கப்படுகிறது, மேலும் இது NPM இன் படி வாரத்திற்கு சுமார் 200,000 முறை பதிவிறக்கம் செய்யப்படுகிறது. Squarespace ஆனது, குறியீடு இல்லாத மாற்றாக, கொத்துத் தளவமைப்பை வழங்கும் தளவமைப்பு கூறுகளையும் வழங்குகிறது, மேலும் பல தளங்கள் அதைப் பயன்படுத்துகின்றன. இந்த இரண்டு விருப்பங்களும் தளவமைப்பில் உருப்படிகளை வைக்க JavaScript குறியீட்டைப் பயன்படுத்துகின்றன. உள்ளமைக்கப்பட்ட கொத்து மேசன்ரி இப்போது உள்ளமைக்கப்பட்ட CSS அம்சமாக உலாவிகளில் தோன்றத் தொடங்கியதில் நான் மிகவும் மகிழ்ச்சியடைகிறேன். காலப்போக்கில், நீங்கள் கிரிட் அல்லது ஃப்ளெக்ஸ்பாக்ஸைப் போலவே கொத்து வேலைகளையும் பயன்படுத்த முடியும், அதாவது, எந்த வேலையும் அல்லது மூன்றாம் தரப்பு குறியீடும் தேவையில்லை. எட்ஜ், குரோம் மற்றும் பல உலாவிகளை அடிப்படையாகக் கொண்ட குரோமியம் ஓப்பன் சோர்ஸ் திட்டத்தில் உள்ளமைந்த மேசன்ரி ஆதரவை மைக்ரோசாப்டில் உள்ள எனது குழு செயல்படுத்தி வருகிறது. Mozilla உண்மையில் 2020 ஆம் ஆண்டில் மேசன்ரியின் சோதனைச் செயலாக்கத்தை முன்மொழிந்த முதல் உலாவி விற்பனையாளர் ஆவார். மேலும் ஆப்பிள் இந்த புதிய வலை தளவமைப்பை பழமையானதாக மாற்றுவதில் மிகவும் ஆர்வமாக உள்ளது. பொதுவான திசை மற்றும் புதிய காட்சி வகை டிஸ்பிளே: கிரிட்-லேன்ஸ் பற்றி CSS பணிக்குழுவில் உடன்பாடு கொண்டு, அம்சத்தை தரப்படுத்துவதற்கான பணியும் முன்னேறி வருகிறது. நீங்கள் கொத்து வேலை பற்றி மேலும் அறிய மற்றும் முன்னேற்றத்தை கண்காணிக்க விரும்பினால், எனது CSS கொத்து வளங்கள் பக்கத்தைப் பார்க்கவும். காலப்போக்கில், கட்டம் அல்லது ஃப்ளெக்ஸ்பாக்ஸைப் போலவே, கொத்து ஒரு அடிப்படை அம்சமாக மாறும் போது, நாங்கள் அதை எளிமையாகப் பயன்படுத்தி பயனடையலாம்:
சிறந்த செயல்திறன், சிறந்த பதில், பயன்பாட்டின் எளிமை மற்றும் எளிமையான குறியீடு.
இவற்றைக் கூர்ந்து கவனிப்போம். சிறந்த செயல்திறன் உங்கள் சொந்த கொத்து போன்ற தளவமைப்பு அமைப்பை உருவாக்குதல் அல்லது அதற்குப் பதிலாக மூன்றாம் தரப்பு நூலகத்தைப் பயன்படுத்துதல், திரையில் உருப்படிகளை வைக்க JavaScript குறியீட்டை இயக்க வேண்டும். இந்த குறியீடு ரெண்டர் பிளாக்கிங் செய்யும் என்பதையும் இது குறிக்கிறது. உண்மையில், அந்த ஜாவாஸ்கிரிப்ட் குறியீடு இயங்கும் வரை எதுவும் தோன்றாது, அல்லது விஷயங்கள் சரியான இடங்களில் அல்லது சரியான அளவுகளில் இருக்காது. கொத்து தளவமைப்பு பெரும்பாலும் வலைப்பக்கத்தின் முக்கிய பகுதிக்கு பயன்படுத்தப்படுகிறது, அதாவது குறியீடு உங்கள் முக்கிய உள்ளடக்கத்தை பிற்காலத்தில் தோன்றச் செய்யும், இது உங்கள் LCP அல்லது மிகப்பெரிய உள்ளடக்க பெயிண்ட் மெட்ரிக்கைக் குறைக்கும், இது உணரப்பட்ட செயல்திறன் மற்றும் தேடுபொறி உகப்பாக்கத்தில் பெரும் பங்கு வகிக்கிறது. டெவ்டூல்ஸில் மெதுவான 4ஜி இணைப்பை உருவகப்படுத்துவதன் மூலமும், எளிய தளவமைப்புடன் மேசன்ரி ஜேஎஸ் லைப்ரரியை சோதித்தேன். நூலகம் பெரிதாக இல்லை (24KB, 7.8KB gzipped), ஆனால் எனது சோதனை நிலைமைகளின் கீழ் ஏற்றுவதற்கு 600ms ஆனது. மேசன் லைப்ரரிக்கு 600ms லோட் நேரம் நீண்டது என்பதையும், அது நடக்கும் போது வேறு எந்த ரெண்டரிங் செயல்பாடும் நடக்கவில்லை என்பதையும் காட்டும் செயல்திறன் பதிவு இங்கே உள்ளது:
கூடுதலாக, ஆரம்ப ஏற்ற நேரத்திற்குப் பிறகு, பதிவிறக்கம் செய்யப்பட்ட ஸ்கிரிப்ட் பாகுபடுத்தப்பட்டு, தொகுக்கப்பட்டு, பின்னர் இயக்கப்பட வேண்டும். இவை அனைத்தும், முன்பு குறிப்பிட்டபடி, பக்கத்தின் ரெண்டரிங்கைத் தடுக்கின்றன. உலாவியில் உள்ளமைக்கப்பட்ட கொத்து செயலாக்கத்துடன், ஏற்றி இயக்க எங்களிடம் ஸ்கிரிப்ட் இருக்காது. பிரவுசர் இன்ஜின் ஆரம்பப் பக்க ரெண்டரிங் படியின் போது அதன் காரியத்தைச் செய்யும். சிறந்த பொறுப்புணர்வு ஒரு பக்கம் முதலில் ஏற்றப்படும் போது, உலாவி சாளரத்தை மறுஅளவிடுவது அந்தப் பக்கத்தில் உள்ள தளவமைப்பை மீண்டும் வழங்குவதற்கு வழிவகுக்கிறது. இந்த கட்டத்தில், பக்கம் Masonry JS நூலகத்தைப் பயன்படுத்தினால், ஸ்கிரிப்டை மீண்டும் ஏற்ற வேண்டிய அவசியமில்லை, ஏனெனில் அது ஏற்கனவே உள்ளதுஇங்கே. இருப்பினும், உருப்படிகளை சரியான இடங்களில் நகர்த்தும் குறியீடு இயங்க வேண்டும். இப்போது இந்த குறிப்பிட்ட நூலகம் பக்கம் ஏற்றப்படும்போது இதைச் செய்வதில் மிக வேகமாக இருப்பதாகத் தெரிகிறது. இருப்பினும், சாளர மறுஅளவிலில் உருப்படிகளை வேறு இடத்திற்கு நகர்த்த வேண்டியிருக்கும் போது இது அனிமேட் செய்கிறது, மேலும் இது ஒரு பெரிய வித்தியாசத்தை ஏற்படுத்துகிறது. நிச்சயமாக, நாங்கள் டெவலப்பர்கள் செய்வது போல் பயனர்கள் தங்கள் உலாவி சாளரங்களை மறுஅளவிடுவதில் நேரத்தை செலவிடுவதில்லை. ஆனால் இந்த அனிமேஷன் செய்யப்பட்ட மறுஅளவிடல் அனுபவம் மிகவும் குழப்பமானதாக இருக்கும், மேலும் பக்கமானது அதன் புதிய அளவிற்கு மாற்றியமைக்க எடுத்துக்கொள்ளும் நேரத்தைச் சேர்க்கிறது. பயன்பாட்டின் எளிமை மற்றும் எளிமையான குறியீடு வலை அம்சத்தைப் பயன்படுத்துவது எவ்வளவு எளிதானது மற்றும் குறியீடு எவ்வளவு எளிமையானது என்பது உங்கள் குழுவிற்கு பெரிய மாற்றத்தை ஏற்படுத்தக்கூடிய முக்கியமான காரணிகளாகும். இறுதி பயனர் அனுபவத்தைப் போல அவை எப்போதும் முக்கியமானதாக இருக்க முடியாது, ஆனால் டெவலப்பர் அனுபவம் பராமரிப்பில் தாக்கத்தை ஏற்படுத்துகிறது. உள்ளமைக்கப்பட்ட இணைய அம்சத்தைப் பயன்படுத்துவது அந்த முன்னணியில் முக்கியமான நன்மைகளுடன் வருகிறது:
HTML, CSS மற்றும் JS ஆகியவற்றை ஏற்கனவே அறிந்த டெவலப்பர்கள் பெரும்பாலும் அந்த அம்சத்தை எளிதாகப் பயன்படுத்த முடியும், ஏனெனில் இது நன்றாக ஒருங்கிணைத்து மற்ற இணைய தளத்துடன் ஒத்துப்போகும் வகையில் வடிவமைக்கப்பட்டுள்ளது. அம்சம் எவ்வாறு பயன்படுத்தப்படுகிறது என்பதில் மாற்றங்கள் அறிமுகப்படுத்தப்படும் அபாயம் இல்லை. அந்த அம்சம் நிராகரிக்கப்படும் அல்லது பராமரிக்கப்படாமல் போகும் அபாயம் கிட்டத்தட்ட பூஜ்ஜியமாக உள்ளது.
உள்ளமைக்கப்பட்ட கொத்து விஷயத்தில், இது ஒரு பழமையான தளவமைப்பு என்பதால், நீங்கள் CSS இலிருந்து கிரிட் அல்லது ஃப்ளெக்ஸ்பாக்ஸைப் போலவே பயன்படுத்துகிறீர்கள், எந்த JS தொடர்பும் இல்லை. மேலும், இடைவெளி போன்ற பிற தளவமைப்பு தொடர்பான CSS பண்புகள் நீங்கள் எதிர்பார்ப்பது போல் செயல்படும். தெரிந்து கொள்ள எந்த தந்திரங்களும் அல்லது தீர்வுகளும் இல்லை, மேலும் நீங்கள் கற்றுக் கொள்ளும் விஷயங்கள் MDN இல் ஆவணப்படுத்தப்பட்டுள்ளன. Masonry JS libக்கு, துவக்கம் சற்று சிக்கலானது: நெடுவரிசை மற்றும் இடைவெளி அளவுகளை அமைக்க, ஒரு குறிப்பிட்ட தொடரியல் கொண்ட தரவு பண்புடன், மறைக்கப்பட்ட HTML கூறுகள் தேவை. கூடுதலாக, நீங்கள் நெடுவரிசைகளை விரிவுபடுத்த விரும்பினால், சிக்கல்களைத் தவிர்க்க இடைவெளி அளவை நீங்களே சேர்க்க வேண்டும்:
<பாணி> .டிராக்-சைசர், .உருப்படி { அகலம்: 20%; } .கட்டர்-சைசர் { அகலம்: 1 rem; } .உருப்படி { உயரம்: 100px; விளிம்பு-தடுப்பு-முடிவு: 1rem; } .item:nth-child(ஒற்றைப்படை) { உயரம்: 200px; } .item--with2 { அகலம்: calc(40% + 1rem); }
உள்ளமைக்கப்பட்ட கொத்து செயல்படுத்தல் எப்படி இருக்கும் என்பதை இதை ஒப்பிடலாம்: <பாணி> .கொள்கலன் { காட்சி: கட்டம் பாதைகள்; கட்டம்-பாதைகள்: மீண்டும் (4, 20%); இடைவெளி: 1 rem; } .உருப்படி { உயரம்: 100px; } .item:nth-child(ஒற்றைப்படை) { உயரம்: 200px; } .item--with2 { கட்டம்-நெடுவரிசை: இடைவெளி 2; }
கிரிட்டில் உள்ளதைப் போலவே, இடைவெளி மற்றும் ஸ்பானிங் டிராக்குகள் ஸ்பான் 2 மூலம் செய்யப்படுவது போன்ற விஷயங்களைப் பயன்படுத்தக்கூடிய எளிமையான, மிகவும் கச்சிதமான குறியீடு, மற்றும் இடைவெளி அளவை உள்ளடக்கிய சரியான அகலத்தைக் கணக்கிட வேண்டிய அவசியமில்லை. என்ன கிடைக்கும், எப்போது கிடைக்கும் என்பதை எப்படி அறிவது? ஒட்டுமொத்தமாக, நீங்கள் ஒரு JS நூலகத்தில் உள்ளமைக்கப்பட்ட கொத்துகளைப் பயன்படுத்த வேண்டுமா என்பது உண்மையில் கேள்வி அல்ல, மாறாக எப்போது. Masonry JS நூலகம் ஆச்சரியமாக இருக்கிறது மற்றும் பல ஆண்டுகளாக வலை தளத்தில் ஒரு இடைவெளியை நிரப்பி வருகிறது, மேலும் பல மகிழ்ச்சியான டெவலப்பர்கள் மற்றும் பயனர்களுக்கு. நீங்கள் அதை உள்ளமைக்கப்பட்ட கொத்து செயலாக்கத்துடன் ஒப்பிட்டுப் பார்த்தால், அதில் சில குறைபாடுகள் உள்ளன, ஆனால் அந்தச் செயலாக்கம் தயாராக இல்லை என்றால் அவை முக்கியமல்ல. நான் உலாவி விற்பனையாளரிடம் பணிபுரிவதால், இந்த அருமையான புதிய வலைதள அம்சங்களைப் பட்டியலிடுவது எனக்கு எளிதானது, அதனால் என்ன வரப்போகிறது என்பதை அறிய முனைகிறேன். ஆனால் புதிய விஷயங்களைக் கண்காணிப்பது கடினம் என்று டெவலப்பர்கள் அடிக்கடி பகிர்ந்து கொள்கிறார்கள். தகவலறிந்து இருப்பது கடினம், நிறுவனங்கள் எப்பொழுதும் கற்றலுக்கு முன்னுரிமை கொடுப்பதில்லை. இதற்கு உதவ, எளிய மற்றும் சுருக்கமான வழிகளில் புதுப்பிப்புகளை வழங்கும் சில ஆதாரங்கள் இங்கே உள்ளன, எனவே உங்களுக்குத் தேவையான தகவலை விரைவாகப் பெறலாம்:
இணைய தளம் எக்ஸ்ப்ளோரர் தளத்தைக் கொண்டுள்ளது: அதன் வெளியீட்டு குறிப்புகள் பக்கத்தில் நீங்கள் ஆர்வமாக இருக்கலாம். மேலும், நீங்கள் RSS ஐ விரும்பினால், வெளியீட்டு குறிப்புகள் ஊட்டத்தையும், புதிதாகக் கிடைக்கும் மற்றும் பரவலாகக் கிடைக்கும் ஊட்டங்களையும் பார்க்கவும்.
வலைபிளாட்ஃபார்ம் நிலை டாஷ்போர்டு: அதன் பல்வேறு அடிப்படை ஆண்டு பக்கங்களை நீங்கள் விரும்பலாம்.
Chrome இயங்குதள நிலையின் சாலை வரைபடப் பக்கம்.
உங்களுக்கு இன்னும் சிறிது நேரம் இருந்தால், உலாவி விற்பனையாளர்களின் வெளியீட்டு குறிப்புகளில் நீங்கள் ஆர்வமாக இருக்கலாம்:
குரோம் விளிம்பு பயர்பாக்ஸ் சஃபாரி
இன்னும் கூடுதலான ஆதாரங்களுக்கு, எனது நேவிகேட்டிங் தி வெப் பிளாட்ஃபார்ம் சீட்ஷீட்டைப் பார்க்கவும். என் விஷயம் இன்னும் செயல்படுத்தப்படவில்லை அது பிரச்சினையின் மறுபக்கம். நேரம், ஆற்றல் மற்றும் கண்காணிப்பதற்கான வழிகளை நீங்கள் கண்டறிந்தாலும், உங்கள் குரலைக் கேட்டு உங்களுக்குப் பிடித்த அம்சங்களைச் செயல்படுத்துவதில் விரக்தி இருக்கும். ஒரு குறிப்பிட்ட பிழை தீர்க்கப்படுவதற்கு பல ஆண்டுகளாக நீங்கள் காத்திருக்கலாம் அல்லது ஒரு குறிப்பிட்ட அம்சம் இன்னும் இல்லாத உலாவியில் அனுப்பப்படலாம். நான் என்ன சொல்கிறேன் என்றால் உலாவி விற்பனையாளர்கள் கேளுங்கள். டெவலப்பர் சிக்னல்கள் மற்றும் பின்னூட்டங்களை நாங்கள் எப்போதும் விவாதிக்கும் பல குறுக்கு அமைப்புக் குழுக்களின் ஒரு பகுதியாக இருக்கிறேன். ஒவ்வொரு உலாவி விற்பனையாளரின் உள் மற்றும் கருத்துக்களம், திறந்த மூல திட்டங்கள், வலைப்பதிவுகள் மற்றும் கருத்துக்கணிப்புகள் ஆகியவற்றில் வெளி/பொதுவான பல்வேறு கருத்துக்களைப் பார்க்கிறோம். மேலும், டெவலப்பர்கள் தங்களின் குறிப்பிட்ட தேவைகளைப் பகிர்ந்துகொள்வதற்கும் வழக்குகளைப் பயன்படுத்துவதற்கும் சிறந்த வழிகளை உருவாக்க நாங்கள் எப்போதும் முயற்சித்து வருகிறோம். எனவே, உங்களால் முடிந்தால், உலாவி விற்பனையாளர்களிடம் இருந்து மேலும் கோருங்கள் மற்றும் உங்களுக்குத் தேவையான அம்சங்களைச் செயல்படுத்த எங்களுக்கு அழுத்தம் கொடுங்கள். இது நேரம் எடுக்கும், மேலும் பயமுறுத்தும் (உள்ளே நுழைவதற்கு அதிக தடையைக் குறிப்பிட தேவையில்லை), ஆனால் அதுவும் வேலை செய்கிறது. உங்கள் (அல்லது உங்கள் நிறுவனத்தின்) குரலைக் கேட்க சில வழிகள் இங்கே உள்ளன: வருடாந்திர JS நிலை, CSS நிலை மற்றும் HTML ஆய்வுகளின் நிலை ஆகியவற்றை எடுத்துக் கொள்ளுங்கள். உலாவி விற்பனையாளர்கள் தங்கள் வேலைக்கு எவ்வாறு முன்னுரிமை அளிக்கிறார்கள் என்பதில் அவர்கள் ஒரு பெரிய பாத்திரத்தை வகிக்கிறார்கள். குறிப்பிட்ட நிலையான அடிப்படையிலான ஏபிஐ உலாவிகள் முழுவதும் தொடர்ந்து செயல்படுத்தப்பட வேண்டுமெனில், அடுத்த இண்டராப் திட்ட மறுமுறையில் ஒரு முன்மொழிவைச் சமர்ப்பிக்கவும். இதற்கு அதிக நேரம் தேவைப்படுகிறது, ஆனால் Shopify மற்றும் RUMvision இன்டெராப் 2026க்கான தங்கள் விருப்பப் பட்டியலை எவ்வாறு பகிர்ந்துள்ளன என்பதைக் கவனியுங்கள். இது போன்ற விரிவான தகவல்கள் உலாவி விற்பனையாளர்களுக்கு முன்னுரிமை அளிக்க மிகவும் பயனுள்ளதாக இருக்கும். உலாவி விற்பனையாளர்களை பாதிக்கும் பயனுள்ள இணைப்புகளுக்கு, எனது நேவிகேட்டிங் தி வெப் பிளாட்ஃபார்ம் சீட்ஷீட்டைப் பார்க்கவும். முடிவுரை மூடுவதற்கு, இந்தக் கட்டுரை உங்களுக்குச் சிந்திக்க சில விஷயங்களை விட்டுச்சென்றுள்ளது என்று நம்புகிறேன்:
கொத்து மற்றும் பிற வரவிருக்கும் வலை அம்சங்களுக்கான உற்சாகம். நீங்கள் பயன்படுத்தத் தொடங்க விரும்பும் சில இணைய அம்சங்கள். உள்ளமைக்கப்பட்ட அம்சங்களுக்கு ஆதரவாக சில தனிப்பயன் அல்லது மூன்றாம் தரப்புக் குறியீட்டை நீங்கள் அகற்றலாம். என்ன வரப்போகிறது என்பதைக் கண்காணிக்கவும் உலாவி விற்பனையாளர்களை பாதிக்கவும் சில வழிகள்.
மிக முக்கியமாக, இணைய தளத்தை அதன் முழுத் திறனுக்கும் பயன்படுத்துவதன் நன்மைகளை நான் உங்களுக்கு உணர்த்தியிருக்கிறேன் என்று நம்புகிறேன்.
