ශ්‍රී ලංකාවේ නවතම තාක්ෂණික පුවත් 2026-07-22, Wednesday
💻 ක්‍රමලේඛනය · 🕒 කියවීමට විනාඩි 2 · 👁 1

ස්කේන්ෂොට් නොකරන්න! සරල HTML එකකින් සංරචනා රූප නිර්මාණය කිරීමේ නව ක්‍රමය

ස්කේන්ෂොට් නොකරන්න! සරල HTML එකකින් සංරචනා රූප නිර්මාණය කිරීමේ නව ක්‍රමය

සොෆ්ට්වෙයා සංවර්ධකයින් අතර රූපයක් ග්‍රහණය කරගෙන සංරචනා රූප බෙදාගැනීමේ පුරුද්ද තවමත් පවතී. ඒක තවත් ස්ප්‍රින්ට් එකේ පරණ වෙලා, වෙනස්කම් පවා නොකළාම ඉවත් කරයි.

අද දින, දෙකක් වූ පුහුණු රූප – ස්තරගත යොමුකිරීම සහ වැඩ පිළිවෙළ ස්විම්ලේන් – එකම HTML ගොනුවක් ලෙස නැවත ලියන ලදී. දත්ත කොටස JavaScript අරේ එකක සුරකිමින්, බ්ලොක්ස් පිහිටුවීමට CSS Grid භාවිතා කරන අතර, සම්බන්ධක රේඛා SVG overlay එකක් මත ඕනෑම කාලයේ ගණනය කරයි. මේ නිසා රූපය ක්ලික් කර පියවරෙන් පියවරෙන් පරීක්ෂා කළ හැකි, අන්තර්ක්‍රියාත්මක, සහ අන්තර්ජාලයට සම්බන්ධ නැති තැනකත් විවෘත කළ හැකි වේ.

මෙම විධියෙන් ලැබෙන ප්‍රතිලාභ වන්නේ:

  • ගොනුවක් පමණක් – වෙනත් සම්පත් හෝ බිල්ඩ් පියවර අවශ්‍ය නැත.
  • දත්ත වෙනස් කිරීමෙන් පමණක් අංග එකතු/විකාශනය කළ හැකිය.
  • ඇඳුම් මෙවලම් සඳහා ලයිසන් ගෙවීමට අවශ්‍ය නොවේ.
  • වෙනත් පරිසරයන්හි (ඩෙස්ක්ටොප්, මොබයිල්) එකම රූපයක් පෙන්වයි.

අනතුරු පැත්තක් ලෙස, ස්වයංක්‍රීය පිහිටුවීමක් නොමැති බැවින් බ්ලොක්ස් ස්ථාන තීරණය කිරීමට කේතය ලිවිය යුතුය. ඒත් සම්පූර්ණ පාලනය සහ අන්තර්ක්‍රියාකාරීත්වය නිසා ව්‍යාපෘති ලේඛන, පුහුණු මට්ටම්, හා ගනුදෙනුකරුවන්ට පෙන්වීමේ දෘශ්‍යතා සඳහා මෙය සුදුසු වේ.

ශ්‍රී ලංකාවට ඇති වැදගත්කම

ශ්‍රී ලංකාවේ තරුණ සංවර්ධකයන්ට, මෙම පදනම පහසු අන්තර්ගතයක් ලෙස ලබා දීමෙන් පරිසරය හෝ ලයිසන් ගාස්තුව ගැන අධික බරක් නොදැන, ඉගෙනීමේ ගුණාත්මකභාවය වැඩි වේ. ආයතනික වශයෙන්, ලොකු පරිමාණයේ තාක්ෂණික ලේඛන බෙදාගැනීමේදී සරල HTML ගොනුවක් භාවිතා කිරීමෙන් සර්වර් පටිපාටිය, ආරක්ෂාව, සහ ප්‍රවේශය අඩු විය හැකිය. එමෙන්ම, විදේශීය සොෆ්ට්වෙයා උපකරණ වලට අය කරන ලාභ අඩු කිරීමෙන් ව්‍යාපාරික පිරිවැයත් අඩු වේ.

අවසානයේ, රූපයක් සකස් කිරීමේ පාරම්පරික ක්‍රමයට වඩා, දත්ත‑ආධාරිත HTML විසඳුම ඉක්මනින් වෙනස් විය හැකි, අන්තර්ක්‍රියාත්මක, හා පවත්නා තාක්ෂණික පරිසරයට අනුකූල වේ. ඔබේ ව්‍යාපෘතියේ රූප සකස් කිරීමේ අලුත් ක්‍රමය අදම පරීක්ෂා කර බලන්න.

💡 ඔබේ ව්‍යාපෘතියේ රූප සකස් කිරීමේ අලුත් ක්‍රමය අදම පරික්ෂා කරන්න!
මූලාශ්‍රය මෙම ලිපිය AI මගින් රචිත මුල් සාරාංශයකි. සම්පූර්ණ වාර්තාව කියවන්න:
Dev.to ↗
#HTML #CSS Grid #SVG #DevTools #Learning