މި މަންޒަރު ގާތްގަނޑަކަށް އަބަދުވެސް އެއްގޮތަކަށް ހުންނައިރު، އެއީ ސްކްރޯލް ކުރެވޭ ކޮންޓެއިނަރެއްގެ ތެރޭގައި ހުންނަ ޑޭޓާ ޓޭބަލެކެވެ. ކޮންމެ ރޯއެއްގައިވެސް އެކްޝަން މެނޫއެއް، އެޑިޓް، ޑަޕްލިކޭޓް، އަދި ޑިލީޓް ފަދަ ބައެއް އޮޕްޝަންތައް ހިމެނޭ ކުޑަ ޑްރޮޕްޑައުންއެއް ހުރެއެވެ. ތިޔަ ބިލްޑް ކުރާއިރު، އެކަހެރިކޮށް ފުރިހަމައަށް މަސައްކަތް ކުރާހެން ހީވާއިރު، ދެން މީހަކު އެ ސްކްރޯލް ކުރެވޭ ޑިވްގެ ތެރެއަށް ލާފައި އެއްޗެހި ވެއްޓިގެން ދާހެން. އަޅުގަނޑަށް މި ސީދާ ބަގް ފެނިފައިވަނީ ތަފާތު ތިން ކޯޑްބޭސްއެއްގައި: ކޮންޓެއިނަރ، ސްޓޭކް، އަދި ފްރޭމްވޯކް، ހުރިހާ އެއްޗެއް ތަފާތު. ނަމަވެސް ބަގް މުޅިން އެއްގޮތެވެ. ޑްރޮޕްޑައުން ކޮންޓެއިނަރުގެ އަރިމަތީގައި ކްލިޕް ވެއެވެ. ނުވަތަ ލޮޖިކަލީ އޭގެ ދަށުގައި ހުންނަން ޖެހޭ ކޮންޓެންޓްގެ ފަހަތުން ފެންނަ އެއްޗެކެވެ. ނުވަތަ ޔޫޒަރ ސްކްރޯލް ވާންދެން ރަނގަޅަށް މަސައްކަތް ކުރާއިރު، ދެން ދުއްވާލައެވެ. You reach for z-index: 9999. ބައެއް ފަހަރު އެހީތެރިވެދިން ނަމަވެސް އަނެއްބައި ފަހަރު އެއްވެސް ކަމެއް ނުކުރެއެވެ. އެ އެއްގޮތް ނުވުމަކީ މިއަށްވުރެ ފުން ކަމެއް ހިނގަމުންދާ ކަމުގެ ފުރަތަމަ ފިލާވަޅެވެ. އެނބުރި އަންނަން ޖެހޭ ސަބަބަކީ ވަކިވަކިން ތިން ބްރައުޒާ ސިސްޓަމެއް ހިމެނޭތީ، ގިނަ ޑިވެލޮޕަރުންނަށް ކޮންމެ ސިސްޓަމެއް އަމިއްލައަށް ވިސްނޭ ނަމަވެސް ތިން އެއްޗެއް ޖެހުމުން ވާނެ ގޮތަކާ މެދު ދުވަހަކުވެސް ނުވިސްނާތީ އެވެ.
މި ތިން މީހުން ވެސް މުއާމަލާތް ކުރާ ގޮތް ވިސްނިއްޖެ ނަމަ، ފެއިލްވުމުގެ މޯޑްތައް ރެންޑަމް ކަމުގެ އިހުސާސް ކުރެވުން ހުއްޓެވެ. ހަގީގަތުގައި އެއީ ލަފާކުރެވޭ ކަންތައްތަކަކަށް ވެގެންދެއެވެ. އަސްލު މިކަން މެދުވެރިވާ ތިން ކަމެއް އެއިން ކޮންމެ އެއްޗަކަށް ތަފްސީލުކޮށް ބަލާލަމާ ހިނގާށެވެ. ދަ އޯވަރފްލޯ މައްސަލަ އެލިމެންޓެއްގައި އޯވަރފްލޯ: ހިޑެން، އޮވަރފްލޯ: ސްކްރޯލް، ނުވަތަ އޯވަރފްލޯ: އޮޓޯ ސެޓް ކުރާއިރު، ބްރައުޒާއިން އޭގެ ޙައްދުތަކުން ބޭރަށް ދިގުވާ ކޮންމެ އެއްޗެއް ކްލިޕް ކުރާނެއެވެ. .ސްކްރޯލް-ކޮންޓެއިނަރ { . އޯވަރފްލޯ: އޮޓޯ؛ އުސްމިން: 300px؛ /* މިއީ ޑްރޮޕްޑައުން ކްލިޕް ކުރާނެ، ފުލް ސްޓޮޕް */ }
.ޑްރޮޕްޑައުން { މަޤާމު: މުޅިން މުޅިން؛ /* މުހިންމެއް ނޫން -- އަދިވެސް ކްލިޕްކޮށްފައިވަނީ .scroll-container އިން */ }
އެއީ އަހަރެން ފުރަތަމަ ފަހަރަށް އެކަމާ ދިމާވިއިރު އަހަރެން ހައިރާންވި ކަމެކެވެ. އަހަރެން ގަބޫލުކުރީ މަޤާމު: އެބްސޮލިއުޓް އިން ކޮންޓެއިނަރެއްގެ ކްލިޕިންގ އިން އެލިމެންޓެއް ފިލައިގެން ދާނެ. އެހެނެއް ނޫނެވެ. ޢަމަލީގޮތުން އޭގެ މާނައަކީ މުޅިން ޕޮޒިޝަން ކުރެވިފައިވާ މެނޫއެއް ނޮން-ވިޒިބަލް އޯވަރފްލޯ ވެލިއުއެއް އޮންނަ ކޮންމެ ކާބަފައިން ކަނޑާލެވޭނެ، އެ ކާބަފައިންނަކީ މެނޫގެ ކޮންޓެއިން ބްލޮކެއް ނޫން ނަމަވެސް. ކްލިޕް ކުރުމާއި ޕޮޒިޝަން ކުރުމަކީ ވަކި ނިޒާމުތަކެކެވެ. އެމީހުން ހަމަ ދިމާވަނީ މުޅިން ރެންޑަމް ގޮތަކަށް ފެންނަ ގޮތަށް ދެ ކަންތައް ވެސް ވިސްނޭހާ ހިނދަކު ޖެހިގެންނެވެ.
މިއީ createPortal ބޭނުންކޮށްގެން ރިއެކްޓްގެ މިސާލެކެވެ:
'ރިއެކްޓް-ޑޮމް' އިން { createPortal } އިމްޕޯޓްކުރުން؛ import { ޔޫސްސްޓޭޓް، ޔޫސްއެފެކްޓް، ޔޫސްރެފް } from 'ރިއެކްޓް'؛
function ޑްރޮޕްޑައުން({ anchorRef, isOpen, ކުޑަކުދިން }) { const [ޕޮޒިޝަން، ސެޓްޕޮޒިޝަން] = useState({ މަތީ: 0، ކަނާތް: 0 });
ޔޫސްއެފެކްޓް (() => { if (isOpen && anchorRef.current) { const rect = އެންކަރރެފް.ކަރަންޓް.ގެޓްބައުންޑިންގކްލައިންޓްރެކްޓް(); ސެޓްޕޮޒިޝަން({ މަތީ: ރެކްޓް.ބޮޓޮމް + ވިންޑޯ.ސްކްރޯލްވައި، ކަނާތް: ރެކްޓް.ކަނާތް + ވިންޑޯ.ސްކްރޯލްއެކްސް، }); } }، [އައިސްއޮޕަން، އެންކަރރެފް]);
if (!isOpen) ރިޓަރން ނަލް؛
return ކްރިއޭޓްޕޯޓަލް(
އަދި ހަމަގައިމުވެސް، އަޅުގަނޑުމެންނަށް އެކްސެސިބިލިޓީއަށް އަޅާނުލެވޭނެ. ކޮންޓެންޓްގެ މައްޗަށް ފެންނަ ފިކްސްޑް އެލިމެންޓްތައް އަދިވެސް ކީބޯޑް އިން ރީޗް ކުރެވޭ ގޮތަށް ހުންނަން ޖެހެއެވެ. ފޯކަސް އޯޑަރ ގުދުރަތީ ގޮތުން ފިކްސްޑް ޑްރޮޕްޑައުން އަށް ނުވަދެވޭނަމަ، ކޯޑް ބޭނުންކޮށްގެން މެނޭޖް ކުރަން ޖެހޭނެއެވެ. އަދި އެކަން ބާތިލް ކުރެވޭނެ ގޮތެއް ނެތި އެހެން އިންޓަރެކްޓިވް ކޮންޓެންޓްތަކުގެ މައްޗަށް އިށީނދެގެން ނުވާކަން ވެސް ޗެކް ކުރަން ޖެހެ އެވެ. އެ އެއްޗަކީ ކީބޯޑް ޓެސްޓިންގައި ދަތްއަޅާ އެއްޗެކެވެ. ސީއެސްއެސް އެންކަރ ޕޮޒިޝަނިންގ: އަހަރެންނަށް ހީވަނީ މިއީ މިސްރާބު ޖަހާ އެއްޗެއް ކަމަށް ސީއެސްއެސް އެންކަރ ޕޮޒިޝަނިންގ އަކީ މިވަގުތު އަޅުގަނޑު އެންމެ ޝައުގުވެރިވާ މިސްރާބެވެ. އަހަރެންނަށް ފުރަތަމަ ބަލާލިއިރު ސްޕެކްގެ ކިހާވަރެއް އަސްލު ބޭނުންކުރެވޭނެ ކަމެއް ނޭނގުނެވެ. އެއީ ޑްރޮޕްޑައުންއަކާއި އޭގެ ޓްރިގަރ އާއި ދެމެދު އޮންނަ ގުޅުން ސީދާ ސީއެސްއެސްގައި ޑިކްލެއާ ކުރެވޭނެ ގޮތް ހެދުމާއި، ބްރައުޒާ އިން ކޯޑިނޭޓްސް ޙަވާލުކުރާ އެއްޗެކެވެ. .ޓްރިގަރ { . anchor-name: --އަހަރެންގެ-ޓްރިގަރ؛ }
.ޑްރޮޕްޑައުން-މެނޫ { މަޤާމު: މުޅިން މުޅިން؛ ޕޮޒިޝަން-އެންކަރ: --މައި-ޓްރިގަރ؛ މަތީގައި: އެންކަރ(ތިރީގައި)؛ ކަނާތް: އެންކަރ(ކަނާތް)؛ ޕޮޒިޝަން-ޓްރައި-ފޯލްބެކްސް: ފްލިޕް-ބްލޮކް، ފްލިޕް-އިންލައިން؛ }
ޕޮޒިޝަން-ޓްރައި-ފޯލްބެކްސް ޕްރޮޕަޓީ އަކީ މެނުއަލް ކަލަކުލެޝަނެއްގެ މައްޗަށް މިކަން ބޭނުން ކުރަން ޖެހޭ އެއްޗެކެވެ. ބްރައުޒާ އިން ދޫކޮށްލުމުގެ ކުރިން ބަދަލު ޕްލޭސްމަންޓްތައް ޓްރައި ކުރާތީ ވިއުޕޯޓްގެ ތިރީގައި ހުންނަ ޑްރޮޕްޑައުން އެއް ކަނޑާލުމުގެ ބަދަލުގައި އޮޓޮމެޓިކުން މައްޗަށް އުފުލިގެންދެއެވެ. ކްރޯމިއަމް އަށް ބިނާކޮށްފައިވާ ބްރައުޒާތަކުގައި ބްރައުޒާ ސަޕޯޓް ސޮލިޑް ކަމަށާއި ސަފާރީގައި ވެސް ކުރިއަރަމުން އަންނަ ކަމަށް ވެސް ބުންޏެވެ. ފަޔަރފޮކްސް ބޭނުންވަނީ ޕޮލިފިލްއެކެވެ. @oddbird/css-anchor-positioning ޕެކޭޖުގައި ކޯ ސްޕެކް ކަވަރުކޮށްފައިވެއެވެ. އަހަރެން ކުރިން ލަފާ ނުކުރި ފޯލްބެކްސް ބޭނުންވާ ގޮތަށް ލޭއައުޓް އެޖް ކޭސްތައް ޖަހާފައި ވާތީ، ޕްރޮގްރެސިވް އެންހެންސްމަންޓެއްގެ ގޮތުގައި ބަލާ ނުވަތަ އޭ އާއި ޖޯޑުކޮށްލާށެވެފަޔަރފޮކްސް އަށް ޖާވާސްކްރިޕްޓް ފޯލްބެކް. ކުރުކޮށް ބުނާނަމަ އުއްމީދީ ނަމަވެސް އަދި ޔުނިވާސަލްއެއް ނޫނެވެ. ތިމާގެ ޓާގެޓް ބްރައުޒާތަކުގައި ޓެސްޓް ކުރާށެވެ. އަދި އެކްސެސިބިލިޓީއާ ބެހޭގޮތުން ބުނާނަމަ، ސީއެސްއެސްގައި ވިޝުއަލް ރިލޭޝަންޝިޕް އިއުލާން ކުރުމަކީ އެކްސެސިބިލިޓީ ޓްރީއަށް އެއްވެސް ކަމެއް ނުބުނެވޭނެ ކަމެކެވެ. aria-controls, aria-expanded, aria-haspopup — އެ ބައި އަދިވެސް އޮތީ ތިބާގެ މައްޗަށެވެ. ބައެއް ފަހަރު ދަ ފިކްސް އިޒް ޖަސްޓް މޫވިންގ ދަ އެލިމެންޓް ޕޯޓަލަކަށް އަތްލުމުގެ ކުރިން ނުވަތަ ކޯޑިނޭޓް ކަލަކުލެޝަންސް ހެދުމުގެ ކުރިން އަބަދުވެސް ފުރަތަމަ ކުރާނީ އެއް ސުވާލެކެވެ: މި ޑްރޮޕްޑައުން ހަގީގަތުގައި ސްކްރޯލް ކޮންޓެއިނަރުގެ ތެރޭގައި އުޅެން ޖެހޭނެ ހެއްޔެވެ؟ އެކަން ނުވެއްޖެނަމަ، މާކަޕް މަތީ ފެންވަރުގެ ރެޕަރަކަށް ބަދަލުކުރުމުން، ޖާވާސްކްރިޕްޓެއް ނެތި، ކޯޑިނޭޓް ކަލަކުލެޝަންތަކެއް ނެތި، މައްސަލަ މުޅިން ނައްތާލެވޭނެއެވެ. މިއީ އަބަދު ކުރެވޭނެ ކަމެއް ނޫނެވެ. ބަޓަން އާއި ޑްރޮޕްޑައުން އެއް ކޮމްޕޮނެންޓެއްގައި ކެޕްސުލޭޓް ކުރެވިފައިވާނަމަ، އެއް ކޮމްޕޮނެންޓެއް ނެތި އެއް ކޮމްޕޮނެންޓެއް ނެތި ގެންދިއުމުގެ މާނައަކީ މުޅި އެޕީއައި އަށް އަލުން ވިސްނުމެވެ. އެކަމަކު އެކަން ކުރެވޭއިރު ޑިބަގް ކުރާނެ ކަމެއް ނެތެވެ. މައްސަލަ ހަމަ ނެތް. ވަޓް މޮޑަން ސީއެސްއެސް ސްޓިލް ޑޯސްޓް ސޮލްވް މިތަނަށް ސީއެސްއެސް އިން މާ ދުރަށް ގޮސްފައިވީ ނަމަވެސް އަދިވެސް މާޔޫސްވާ ތަންތަން އެބަހުއްޓެވެ. އެ މަގާމު: ފިކްސްޑް އެންޑް ޓްރާންސްފޯމް މައްސަލަތައް އަދިވެސް އެބަހުރި. އެއީ ގަސްތުގައި ސްޕެކްގައި ހުރި އެއްޗެއް، އޭގެ މާނައަކީ ސީއެސްއެސް ވޯކްއަރައުންޑެއް ނެތް ކަމެވެ. ތިބާގެ ލޭއައުޓް ޓްރާންސްފޯމްޑް އެލިމެންޓެއްގައި ވަށާލާ އެނިމޭޝަން ލައިބްރަރީއެއް ބޭނުން ކުރާނަމަ، ތިބާ އަނބުރާ ޕޯޓަލް ނުވަތަ އެންކަރ ޕޮޒިޝަނިންގ ބޭނުންވެއްޖެއެވެ. ސީއެސްއެސް އެންކަރ ޕޮޒިޝަނިންގ އަކީ އުއްމީދީ ކަމެއް ނަމަވެސް އައު އެއްޗެކެވެ. ކުރިންވެސް ދެންނެވި ފަދައިން، އަޅުގަނޑު މި ލިޔަމުންދާއިރު، ފަޔަރފޮކްސްއަށް އަދިވެސް ޕޮލިފިލްއެއް ބޭނުންވެއެވެ. އަހަރެން ހީވެސް ނުކުރާ ފޯލްބެކްސް ބޭނުންވާ ލޭއައުޓް އެޖް ކޭސްތައް އެއާއެކު ޖަހާފައި ވެއެވެ. މިއަދު ހުރިހާ ބްރައުޒާތަކެއްގައި އެއްގޮތަކަށް ސުލޫކު ބޭނުންވާނަމަ، އަދިވެސް ތިޔަ ހޯދަނީ އުނދަގޫ ބައިތަކަށް ޖާވާސްކްރިޕްޓަށެވެ. އަހަރެންގެ ވޯކްފްލޯ އަސްލު ބަދަލުކުރި އިތުރުވުމަކީ މިހާރު ޒަމާނީ ހުރިހާ ބްރައުޒަރެއްގައި ވެސް ލިބެން ހުރި އެޗްޓީއެމްއެލް ޕޮޕޯވަރ އެޕީއައި އެވެ. ޕޮޕޯވަރ އެޓްރިބިއުޓް އެކުލެވޭ އެލިމެންޓްތައް ބްރައުޒާގެ މަތީ ފަށަލައިގައި، ހުރިހާ ކަމެއްގެ މަތީގައި، ޖާވާސްކްރިޕްޓް ޕޮޒިޝަނިންގ ބޭނުން ނުވާނެއެވެ.
އެސްކޭޕް ހެންޑްލިންގ، ޑިސްމިސް-އޮން-ކްލިކް-އައުޓްސައިޑް، އަދި ސޮލިޑް އެކްސެސިބިލިޓީ ސެމަންޓިކްސް އަކީ ޓޫލްޓިޕްސް، ޑިސްކްލޯސަރ ވިޖެޓްސް، އަދި ސާދާ އޯވަރލޭސް ފަދަ ކަންކަމަށް ހިލޭ ލިބޭ އެއްޗެކެވެ. އެއީ މިވަގުތު އަހަރެން އަތް ފޯރާ ފުރަތަމަ ވަސީލަތެވެ. އެހެން ބުނި ނަމަވެސް، އެކަމުން ޕޮޒިޝަނިންގ ހައްލެއް ނުވެއެވެ. އެއީ ލޭޔަރިންގ ހައްލުކޮށްދޭ އެއްޗެކެވެ. އަދިވެސް ޕޮޕޯވަރެއް އޭގެ ޓްރިގަރ އާއި އެލައިން ކުރުމަށް އެންކަރ ޕޮޒިޝަނިންގ ނުވަތަ ޖާވާސްކްރިޕްޓް ބޭނުންވެއެވެ. ޕޮޕޯވަރ އެޕީއައި އިން ލޭޔަރިންގ ހެންޑްލް ކުރެއެވެ. އެންކަރ ޕޮޒިޝަނިންގ އިން ޕްލޭސްމަންޓް ޙަވާލުކުރެއެވެ. އެއްކޮށް ބޭނުންކޮށްގެން، ކުރިން ލައިބްރަރީއަކަށް ކުރާން އަތް ފޯރާފައިވާ ގިނަ ކަންތައްތައް ކަވަރު ކުރެއެވެ. ތިބާގެ ހާލަތަށް ޑިސިޝަން ގައިޑެއް މިހުރިހާ ކަމެއް އުނދަގޫ ގޮތަކަށް ކުރިއަށް ދިއުމަށްފަހު، މިއޮތީ އަޅުގަނޑު މިހާރު އަސްލު ޗޮއިސްއާ މެދު ވިސްނާ ގޮތެވެ.
ޕޯޓަލްއެއް ބޭނުންކުރުން.އަހަރެން މިކަން ބޭނުންކުރާނީ ޓްރިގަރ ނެސްޓް ކޮށްފައިވާ ސްކްރޯލް ކޮންޓެއިނަރތަކުގެ ފުންމިނުގައި އުޅޭއިރު. އަޅުގަނޑު މި ޕެޓަރން ޓޭބަލް އެކްޝަން މެނޫތަކަށް ބޭނުންކޮށް، ފޯކަސް ރިސްޓޯރޭޝަން އަދި އެކްސެސިބިލިޓީ ޗެކްތަކާ ޖޯޑުކޮށްލީމެވެ. އެއީ އެންމެ އިތުބާރު ކުރެވޭ ގޮތް ނަމަވެސް އިތުރު ވަޔަރިންގ އަށް ވަގުތު ބަޖެޓް ކޮށްލާށެވެ. ފިކްސްޑް ޕޮޒިޝަނިންގ ބޭނުންކުރުން.މިއީ ވެނީލާ ޖާވާސްކްރިޕްޓް ނުވަތަ ލުއި ފްރޭމްވޯކެއްގައި ހުންނައިރު އެއްވެސް ކާބަފައިން ޓްރާންސްފޯމް ނުވަތަ ފިލްޓަރެއް ނުކުރާކަން ޔަގީންކުރެވޭނެއެވެ. އެއީ ސެޓްއަޕް ކުރަން ފަސޭހަ އަދި ޑިބަގް ކުރަން ފަސޭހަ، އެ އެއް ކޮންސްޓްރެއިންޓް ހިފެހެއްޓިހާ ހިނދަކު. ސީއެސްއެސް އެންކަރ ޕޮޒިޝަނިންގ ބޭނުންކުރުން.ތިބާގެ ބްރައުޒާ ސަޕޯޓުން އެކަން ހުއްދަކުރާ ވަގުތު މިކަމަށް އަތް ދިއްކޮށްލާށެވެ. ފަޔަރފޮކްސް ސަޕޯޓް ބޭނުންވާނަމަ، @oddbird ޕޮލިފިލް އާއި ޖޯޑުކޮށްލާށެވެ. މިއީ ޕްލެޓްފޯމް އެންމެ ފަހުން މިސްރާބު ޖަހާފައިވާ ތަނާއި އެންމެ ފަހުން ތިބާގެ ގޯ-ޓު އެޕްރޯޗަކަށް ވެގެންދާނެ ތަނެވެ. ޑީއޯއެމް ރީސްޓްރަކްޗަރ ކުރާށެވެ.މިއީ އަރކިޓެކްޗަރ އިން ހުއްދަ ކުރާ ވަގުތުތަކުގައި ބޭނުން ކުރާށެވެ، އަދި ތިބާ ބޭނުންވަނީ ޒީރޯ ރަންޓައިމް ކޮމްޕްލެކްސިޓީއެވެ. އަހަރެން ގަބޫލުކުރާ ގޮތުގައި އެއީ އެންމެ އަންޑަރރޭޓެޑް އޮޕްޝަން ކަމަށް ބެލެވޭނެއެވެ. ޕެޓަރންސް އެއްކޮށްލާށެވެ.މިކަން ކުރާނީ ތިބާގެ ޕްރައިމަރީ އެޕްރޯޗެއްގެ ގޮތުގައި އެންކަރ ޕޮޒިޝަނިންގ ބޭނުންވާ ވަގުތުތަކުގައި، ސަޕޯޓް ނުކުރާ ބްރައުޒަރތަކަށް ޖާވާސްކްރިޕްޓް ފޯލްބެކެއް ޖޯޑުކޮށްގެންނެވެ. ނުވަތަ ކޯޑިނޭޓް އެކިއުރެސީއަށް getBoundingClientRect() އާއި ޖޯޑުކޮށްފައިވާ ޑީއޯއެމް ޕްލޭސްމަންޓަށް ޕޯޓަލްއެކެވެ.
ނިންމުން އަހަރެން ކުރިން މި ބަގް ދެކެމުން އައީ އެއްފަހަރާ ދިމާވާ މައްސަލައެއްގެ ގޮތުގައި — ޕެޗްކޮށް ކުރިއަށް ދާން ޖެހޭ ކަމެއްގެ ގޮތުގައެވެ. އެކަމަކު އެއްފަހަރަކު އަހަރެން އެއާއެކު ގިނައިރު އިށީނދެގެން އިނދެ، އޭގައި ހިމެނޭ ތިން ސިސްޓަމް ވެސް - އޯވަރފްލޯ ކްލިޕް ކުރުމާއި، ކޮންޓެކްސްޓް ސްޓޭކް ކުރުމާއި، ބްލޮކްތައް ކޮންޓެއިން ކުރުން - ވިސްނޭ ވަރަށް ރެންޑަމް ކަމުގެ އިހުސާސް ކުރުން ހުއްޓެވެ. އަހަރެންނަށް ފަޅައިގެން ގޮސްފައިވާ ޑްރޮޕްޑައުންއަކަށް ބަލާލާފައި ވަގުތުން ޓްރޭސް ކުރެވުނީ ކޮން ކާބަފައިންނެއްތޯ ޒިންމާވާން ޖެހުނެވެ. އަހަރެން ޑީއޯއެމް ކިޔާ ގޮތަށް އެ ބަދަލަކީ އަސްލު ޓޭކްއަވޭ އެވެ. އެއްވެސް ރަނގަޅު ޖަވާބެއް ނެތެވެ. އަހަރެން އަތްދިއްކުރި ކަންތައްތައް ބިނާވެފައި އޮތީ ކޯޑްބޭސްގައި އަހަރެންނަށް ކޮންޓްރޯލް ކުރެވޭނެ ކަންތައްތަކުގެ މައްޗަށެވެ: ކާބަފައިންގެ ގަސް ލަފާނުކުރެވޭ ވަގުތުތަކުގައި ޕޯޓަލްތައް؛ ސާފުތާހިރު ސާދާ ވަގުތުތަކުގައި ފިކްސްޑް ޕޮޒިޝަނިންގ؛ އަހަރެން އެއްވެސް ކަމެއް ހުއްޓުވާފައި ނުވާއިރު އެ އުނިއިތުރު ހަރަކާތްތެރިކުރުން؛ އަދި މިހާރު އެންކަރ ޕޮޒިޝަން ކުރުން،އަހަންނަށް ކުރެވޭ ތަނެކެވެ. ނިމުމުގައި ކޮންމެ އެއްޗެއް އިޚްތިޔާރު ކުރިޔަސް، އެކްސެސިބިލިޓީ އަކީ އެންމެ ފަހު ފިޔަވަޅެއްގެ ގޮތުގައި ނުބަލާށެވެ. އަޅުގަނޑުގެ ތަޖުރިބާއިން، އެއީ ހަމަ އެކަން ސްކިޕް ކުރެވޭ ވަގުތެވެ. އޭރިއާގެ ގުޅުންތަކާއި، ފޯކަސް މެނޭޖްމަންޓާއި، ކީބޯޑް ބިހޭވިއަރ — އެއީ ޕޮލިޝް ގުޅުންތަކެއް ނޫނެވެ. އެއީ އެ އެއްޗެއް ހަގީގަތުގައި މަސައްކަތް ކުރާ އެއްޗެއްގެ ބައެކެވެ. އަހަރެންގެ ގިޓްހަބް ރެޕޯ އިން ފުރިހަމަ ސޯސް ކޯޑް ބައްލަވާށެވެ. އިތުރަށް ކިޔެވުން މިއީ އަޅުގަނޑު މިކަން މެދުވެރިކޮށް މަސައްކަތް ކުރަމުން ދިޔައިރު އަނބުރާ އަންނަމުން ދިޔަ ރިފަރެންސްތަކެވެ:
ދަ ސްޓޭކިންގ ކޮންޓެކްސްޓް (އެމްޑީއެން) “ސީއެސްއެސް އެންކަރ ޕޮޒިޝަނިންގ ގައިޑް”، ޖުއާން ޑިއޭގޯ ރޮޑްރިގޭޒް “ގެޓިންގ ސްޓާރޓެޑް ވިތު ދަ ޕޮޕޯވަރ އެޕީއައި”، ގޯޑްސްޓައިމް އަބޫރޫ ފްލޯޓިންގ ޔޫއައި (floating-ui.com) ސީއެސްއެސް އޮވަރފްލޯ (އެމްޑީއެން)