TechWire

Useful JS and CSS libraries

Javascript හා CSS යොදාගෙන මේ වෙනකොට ලෝකයේ ගොඩක් libraries හදල තියෙනවා. මේ libraries නිර්මාණය කරලා තියෙන්නෙ web developersලගේ හා designersලගේ පහසුවට. මේවා භාවිත කරලා ගොඩක් ලේසියෙන් හා ඉක්මණින් අපිට අවශ්‍ය webpage එකක් dynamic හා interactive විදියට නිර්මාණය කර ගන්න පුළුවන්. ඒ දේවල් කරන්න අවශ්‍යවෙයි කියල හිතෙන libraries ගැන පොඩි විස්තරයක් තමයි මේ article එකෙන් දෙන්නෙ.

jQuery Flexdatalist

Autocomplete වෙන datalist එකක් හදා ගන්න පුළුවන් jquery plugin එකක් තමයි flexdatalist කියන්නෙ. HTML වලින් සාමාන්‍ය විදියට text type input එකක් හදල ඒකෙ class එක විදියට flexdatalist කියන attribute එක දාන්න පුළුවන්. Datalist එකකට අපිට දාන්න ඕන data ටික දාන්න පුළුවන්. වෙනම javascript file එකකින් jquery use කරලා flexdatalist call කරන්න පුළුවන්. එතකොට dynamic datalist එකක් හද ගන්න පුළුවන්. මේකට අවශ්‍ය library resources මේ link එකෙන් ගන්න පුළුවන්.

Animate On Scroll

AOS කියන්නෙ webpage එකක් scroll කරනකොට animation එකක් එක්ක page එක scroll වෙන විදියට හදන්න පුළුවන් JS හා CSS ආශ්‍රිත library එකක්. Scroll වෙද්දි animate වෙන්න ඕන කොටස div එකකට දාල අදාල attribute එක දෙන්න තමයි තියෙන්නෙ. Scroll වෙද්දි page එක ලස්සනට animate වෙන්න හදන්න පුළුවන්. මේ ගැන වැඩි විස්තර මේ link එකෙන් බලන්න පුළුවන්.

Bttn.css

Button වලටම විශේෂ වුණ css library එකක් තමයි මේක. Bootstrap වලට වඩා වෙනස් වගේම අලුත් දේවල් මේකෙ තියෙනවා. එකේක පාට වගේම buttons වල විවිධ animations පවා තියෙනව. විවිධ පාට, විවිධ විශාලත්වත් මේකෙ දීල තියෙනවා. CDN එකකින් import කරන්න තාම හදල නැති වුනාට, download කරලා භාවිත කරන්න පුළුවන්.

CSSPIN

CSSPIN වලින් webpage එකකට අවශ්‍ය indicators හා spinners ලස්සන විදියට එකතු කරන්න පුළුවන්. දැන් ගොඩක් webpagesවල load වෙන බව userට අගවන්න loaders යොදා ගන්නවා. ඒක UX වලට ගොඩක් ඉවහල් වෙන දෙයක්. මේ website එකෙන් CSSPIN වලට අදාල විස්තර වගේම library එක download කරගන්න පුලුවන්.

CSS loader

CSS loader කියන්නෙත් උඩින් කිව්වා වගේම තවත් loaders තියෙන library එකක්. උඩින් කිව්වා library එකේ නැති අලුත් features මේ library එකේ තියෙනවා. Custom text එකක් වුනත් loader එකකට දාන්න පුළුවන්.

Conversational Form

අපි සාමාන්‍යයෙන් webpage එකක් forms දකින්නෙ හැමදාම දකින classical form එකනෙ. ඒ පරණ දේ වෙනස් කරලා conversational type එකට data collect කරන දෙයක් තමයි මේකෙදි වෙන්නෙ. Normal form එකකට වඩා මේ ක්‍රමය ගොඩක් interactive. ඒ වගේම google assistant අපිට දෙන suggestions වගේ මේකෙත් suggestions දෙන්න පුළුවන්. Feedback එකක් normal form එකකින් ගන්නවට වඩා මේ ක්‍රමේට කරනකොට user ඒ දේ කරන්න පෙළඹෙනවා. මේ tool එක SPACE10 කියන community එකකින් තමා කරන්නෙ.

Wenk

Wenk කියන්නෙ webpage එකක tooltip ලස්සන විදියට add කරන්න පුළුවන්, ඒකටම හදල තියෙන library එකක්. Lightweight library එකක් වෙන wenk pure css වලින් ලියල තියෙන නිසා dependencies මුකුත් නෑ වගේම ඕනෑම browser එකක වැඩ.

CurrencyFormatter.js

Webpages හදන කොට තවත් වැදගත් වෙන දෙයක් තමයි currency පෙන්නන එක. Website එකක් localize කරනකොට එහෙම මේ library එක ගොඩක් ලොකු උදව්වක් කරගන්න පුළුවන්. Class එකට අදාල නම දීල අවශ්‍ය ඉලක්කම දුන්නම ඉබේම අවශ්‍ය format එකට currency එකත් එක්කම පෙන්නනවා. Currencies 150ක් විතර තියෙනවා. ඊට අමතර currency එකක් දාන්න github repo එක දීල තියෙනවා. Open source නිසා අපිට ඕන currency එකක් දාල අපිට අපේ දෙයක් කරගන්න පුළුවන්.

KUTE.js

KUTE.js වලින් texts හා SVG animate කරන්න පුළුවන්. CSS හා JS භාවිත කරලා තමයි මේ library එක හදල තියෙන්නෙ. වාක්‍යක් ලියන එක වුණත් animate කරල පෙන්නන්න මේකෙන් පුළුවන්. මේකෙදි අපි animate කරන එක object එකක් විදියට තමයි සළකන්නෙ. Webpage එකට ලොකු dynamic look එකක් දෙන්න KUTE.js වලට පුළුවන්.

Leaflet

Webpage එකකට map එකක් දානවා නම් සාමන්‍යයෙන් භාවිත කෙරෙන්නෙ google maps code එකක් embed කරන එක. නමුත් ඊට වඩා ලස්සනට map එකක් embed කරන්න වගේම attractive විදියට කරන්න Leaflet කියන map library එක භාවිත කරන්න පුළුවන්.

මෙවැනි වැදගත් JS හෝ CSS libraries ඔබත් දන්නවාද? එහෙනම් පහලින් comment එකක් විදිහට දාලා අනිත් හැමෝමත් එක්ක share කරන්න.

About author View all posts Author website

Pramodya Abeysinghe

Leave a Reply

Your email address will not be published. Required fields are marked *