Agarup 15 a tawenen ti napalabas, agtartrabahoak iti maysa a kompania a nangaramidkami kadagiti app para kadagiti ahente ti panagbiahe, trabahador iti eropuerto, ken kompania ti eroplano. Nangaramidkami pay iti bukodmi nga in-house framework para kadagiti paset ti UI ken dagiti kabaelan ti app iti maymaysa a panid. Adda dagiti pasetmi para iti amin: dagiti tay-ak, buton, tab, range, datatable, menu, datepicker, selects, ken multiselects. Adda pay ketdi div component-mi. Nasayaat ti div component-mi iti sabali a pannao, pinalubosannakami nga agaramid kadagiti nagtimbukel a suli kadagiti amin a browser, a, patiem man wenno saan, saan a nalaka nga aramiden iti dayta a tiempo.

Napasamak ti trabahomi iti maysa a punto iti pakasaritaanmi idi ti JS, Ajax, ken dinamiko nga HTML ket nakita a kas maysa a rebolusion a nangiyeg kadakami iti masakbayan. Kellaat a mabalintayo nga i-update ti maysa a panid a dinamiko, makagun-od iti datos manipud iti server, ken maliklikan ti panag-navigate kadagiti dadduma a panid, a naibilang a nabannayat ken agkidem iti dakkel a puraw a rektanggulo iti iskrin iti nagbaetan ti dua a panid. Adda maysa a ragup ti sasao, a pinagbalin a nalatak ni Jeff Atwood (ti nangipasdek iti StackOverflow), a mabasa: “Aniaman nga aplikasion a mabalin a maisurat iti JavaScript ket maisuratto inton agangay iti JavaScript.”— Jeff Atwood

Para kadakami iti dayta a tiempo, daytoy ket narikna a kasla panagtured nga aktual a mapan ken mangparnuay kadagita nga apps. Kasla blanket approval ti rikna nga aramiden ti amin ken ni JS. Isu nga inaramidmi ti amin ken ni JS, ket saanmi a talaga nga inted ti panawen a mangsukisok iti dadduma a pamay-an ti panangaramid kadagiti bambanag. Saanmi a talaga a narikna ti insentibo tapno umiso ti pannakaammomi no ania ti maaramidan ti HTML ken CSS. Saanmi a talaga a nadlaw ti web kas maysa nga agbaliwbaliw nga app platform iti intero. Kaaduanna a nakitami dayta kas maysa a banag a kasapulanmi a pagtrabahuan, nangruna no maipapan iti suporta ti browser. Mabalinmi laeng nga ipuruak ti ad-adu a JS iti dayta tapno maaramid dagiti bambanag. Nakatulong kadi kaniak ti panangipaay iti panawen a mangammo iti ad-adu pay maipapan iti panagandar ti web ken no ania ti magun-odan iti plataporma? Sigurado, mabalinko la ketdi ti nagkiskis iti maysa a bunggoy ti kodigo a saan a pudno a kasapulan. Ngem, iti dayta a tiempo, nalabit saan a kasta. Kitaem, medio dakkel ti nagdumaan ti browser idi. Daytoy ket panawen idi ti Internet Explorer ket isu pay laeng ti dominante a browser, nga addaan ti Firefox a kas ti asideg a maikadua, ngem nangrugi a mapukaw ti bingay ti merkado gapu ti Chrome a napardas a makagun-od ti kinalatak. Nupay medio nalaing ti Chrome ken Firefox nga agtutunos kadagiti pagalagadan ti web, dagiti aglawlaw a pagtartarayan dagiti app-mi ket kayatna a sawen a masapul a suportaranmi ti IE6 iti napaut a panawen. Uray idi napalubosankami a mangsuporta iti IE8, masapul latta a tamingenmi ti adu a nagdumaan dagiti browser. Saan laeng a dayta, no di ket ti web idi a panawen ket awan lattan ti kasta kaadu a kabaelan a naibangon a mismo iti plataporma.

Fast forward agingga ita nga aldaw. Dakkel ti nagbalbaliwan dagiti bambanag. Saan laeng nga ad-adu dagitoy a kabaelantayo ngem idi, no di ket immadu met ti kapartak a magun-odan dagitoy. Bay-anyo nga isaludsodko manen ti saludsod, ngarud: Makatulong kadi kadakayo ita ti panangipaay iti panawen a mangammo iti ad-adu pay maipapan iti panagandar ti web ken no ania ti magun-odan iti plataporma? Naan-anay a wen. Ti panagsursuro a mangtarus ken agusar iti plataporma ti web ita ket mangikabil kenka iti dakkel a bentaha kadagiti dadduma a developer. Agtrabahoka man iti panagaramid, pannakagun-od, panagsungbat, amin dagitoy a sangsangkamaysa, wenno basta mangipatulod kadagiti tampok ti UI, no kayatmo nga aramiden daytoy kas maysa a responsable nga inheniero, ti pannakaammo kadagiti ramit a magun-odmo ket makatulong kenka a mangragpat kadagiti kalatmo a naparpartak ken nasaysayaat. Sumagmamano a Bambanag a Mabalin a Saanmo a Kasapulan ti Libraria Para Iti Itan Gapu ta ammotayo no ania ti suportaran dagiti browser ita, ti saludsod, ngarud, ket: Ania ti mabalintayo nga ibelleng? Kasapulan kadi ti div component tapno makaaramid tayo ti rounded corners inton 2025? Siempre, saantayo nga aramiden dayta. Ti sanikua ti border-radius ket sinuportaran babaen dagiti amin nga agdama a maus-usar a browser iti nasurok a 15 a tawen iti daytoy a punto. Ket umay met ti corner-shape iti mabiit, para kadagiti nagarbo pay a suli. Kitaentayo dagiti medio nabiit pay a tampok a magun-odan itan kadagiti amin a kangrunaan a browser, ken mabalinmo nga usaren a mangsukat kadagiti addan a panagpanpanunot iti codebase-mo. Ti punto ket saan a dagus nga ibelleng amin nga ay-ayatem a libraria ken isurat manen ti codebase-mo. No maipapan iti amin a dadduma pay, kasapulam nga ikabilangan nga umuna ti suporta ti browser ken agdesisionka maibatay iti dadduma pay a banag nga espesipiko iti proyektom. Dagiti sumaganad a tampok ket naipatungpal kadagiti tallo a kangrunaan a makina ti browser (Chromium, WebKit, ken Gecko), ngem mabalin nga addaanka kadagiti nadumaduma a kasapulan ti suporta ti browser a manglapped kenka nga agusar a dagus kadagitoy. Nupay kasta, ita ti nasayaat pay laeng a tiempo tapno maammuanyo dagitoy a tampok, ken nalabit planoyo nga usaren dagitoy inton agangay. Popovers Ken Dialogo Ti Popover API, ti

nga elemento ti HTML, ken ti ::backdrop pseudo-element ket makatulong kenka a mangikkat kadagiti panagpanpanunot iti popup, .tooltip, ken dagiti biblioteka ti dialogo, a kas ti Floating UI, Tippy.js, Tether, wenno React Tooltip. Dagitoy ket mangasikaso ti aksesibilidad ken panagtengngel ti pokus para kenka, iti ruar ti kahon, ket nangato a maibagay babaen ti panagusar ti CSS, ken nalaka a mabalin nga animado. Dagiti akordeon Ti elemento ti
, ti naganna a kababalin para kadagiti agsinnumbangir nga elemento, ken ti ::details-content pseudo-element ket mangikkat ti panagkasapulan kadagiti paset ti akordeon a kas ti Bootstrap Accordion wenno ti paset ti React Accordion. Ti laeng panangusar iti plataporma ditoy ket kayatna a sawen a nalaklaka para kadagiti tattao nga ammoda ti HTML/CSS a maawatan ti kodigom a saan a kasapulan nga umuna a sursuruen ti agusar iti espesipiko a libraria. Kaipapananna met a saanka a makadadael kadagiti panagbalbaliw iti libraria wenno ti pannakaisardeng dayta a libraria. Ket, siempre, kaipapananna ti basbassit a code a mai-download ken mapataray. Dagiti elemento ti detalye nga agsinnumbangir ket saan a kasapulan ti JS tapno malukatan, agserra, wenno ag-animate. Sintaksis ti CSS Dagiti suson ti cascade, para iti ad-adu nga organisado a CSS codebase, CSS nesting, para iti ad-adu a kompakto a CSS, baro a panagandar ti kolor, relatibo a kolor, ken kolor-a-panaglalaok, dagiti baro a panagandar ti Maths a kas ti abs(), sign(), pow() ken dagiti dadduma ket makatulong a mangkissay kadagiti panagpanpanunot kadagiti pre-processor ti CSS, dagiti biblioteka ti utilidad a kas ti Bootstrap ken Tailwind, wenno uray pay dagiti biblioteka ti runtime a CSS-in-JS. Ti game changer :has(), maysa kadagiti kaaduan a kiniddaw a tampok iti napaut a panawen, ket mangikkat ti panagkasapulan kadagiti ad-adu a komplikado a solusion a naibatay iti JS. JS nga Utilities Dagiti moderno a pamay-an ti Array a kas ti findLast(), wenno at(), ken dagiti pay pamay-an ti Set a kas ti difference(), intersection(), union() ken dagiti dadduma pay ket mabalin a mangkissay kadagiti panagpanpanunot kadagiti biblioteka a kas ti Lodash. Dagiti Saludsod iti Container Dagiti panagsaludsod ti paglaon ket mangaramid kadagiti paset ti UI a sumungbat kadagiti banag malaksid ti kadakkel ti viewport, ken gapuna ket mangaramid kadagitoy nga ad-adda a mausar manen iti ballasiw dagiti nadumaduma a konteksto. Saanen a kasapulan ti agusar ti JS-nadagsen a biblioteka ti UI para iti daytoy, ken saan met a kasapulan ti agusar ti polyfill. Layout ti Nabayagen nga adda ti grid, subgrid, flexbox, wenno multi-column, ngem no kitaen dagiti resulta dagiti surbey ti Estado ti CSS, nalawag a dagiti developer ket agannayas nga agannad unay iti panangampon kadagiti baro a banag, ken aguray iti napaut unay sakbay nga aramidenda. Dagitoy a tampok ket nabayagen a Baseline ken mabalinmo nga usaren dagitoy tapno maikkat dagiti panagpanpanunot kadagiti banag a kas ti Bootstrap’s grid system, Foundation Framework’s flexbox utilities, Bulma fixed grid, Materialize grid, wenno dagiti adigi ti Tailwind. Saan ko nga ibaga nga ibaba mo ti framework mo. Adda rason nga inadaptar dayta ti grupoyo, ket mabalin a dakkel a proyekto ti panangikkat iti dayta. Ngem ti panangkita no ania ti maitukon ti web platform no awan ti third-party wrapper iti ngato ket umay nga addaan iti adu a pagimbagan. Dagiti Bambanag a Mabalin a Saanmo A Kasapulan Iti Asidegen a Masanguanan Ita, kitaentayo a dagus ti sumagmamano kadagiti banag a dikayton kasapulan ti libraria iti asidegen a masanguanan. Kayatna a sawen, dagiti banag iti baba ket saan unay a nakasagana para iti masa a panangampon, ngem makatulong ti pannakaammo kadagita ken panagplano para iti mabalin a pannakausar inton agangay. Panagposision ti Angkla Ti panagposision ti angkla ti CSS ket mangasikaso ti panagposision dagiti popover ken dagiti tooltip a relatibo kadagiti sabali nga elemento, ken mangasikaso ti panangtaginayon kadagitoy iti panagkita, urayno no aggaraw, ag-scroll, wenno mangbalbaliw ti kadakkel ti panid. Daytoy ket maysa a dakkel a komplemento iti Popover API a nadakamat itay, a mangpalaka pay ti panagakar nga umadayo manipud kadagiti ad-adu a panagaramid-a-nadagsen a solusion ti JS. API ti panaglayag Ti Navigation API ket mabalin a mausar a mangasikaso ti nabigasion kadagiti agmaymaysa a panid nga app ken mabalin a maysa a naindaklan a komplemento, wenno uray pay maysa a kasukat, kadagiti React Router, Next.js routing, wenno Angular routing tasks. Kitaen ti API ti Panagbalbaliw Ti View Transitions API ket mabalin nga ag-animate iti nagbaetan dagiti nadumaduma nga estado ti maysa a panid. Iti maysa a panid nga aplikasion, daytoy ket mangaramid kadagiti naannayas a panagbalbaliw iti nagbaetan dagiti estado a nalaka unay, ken makatulong kenka a mangikkat kadagiti biblioteka ti animasion a kas ti Anime.js, GSAP, wenno Motion.dev. Nasaysayaat pay, ti API ket mabalin met nga usaren kadagiti adu a panid nga aplikasion. Malagipyo itay, idi kinunak a ti rason a nangaramidkami kadagiti single-page apps iti kompania a nagtrabahoak 15 a tawenen ti napalabas ket tapno maliklikan ti puraw a panagkidem dagiti page reload no ag-navigate? No magun-odan koma dayta nga API iti dayta a tiempo, nagun-odtayo koma dagiti napintas nga epekto ti panagbalbaliw ti panid no awan ti maymaysa a panid a balangkas ken awan ti dakkel nga umuna a panagi-download iti intero nga app. Dagiti Animasion a naiturong babaen ti scroll Dagiti animasion a maiturong babaen ti panag-scroll ket agtaray iti posision ti panag-scroll ti agus-usar, imbes a bayat ti panaglabas ti panawen, a mamagbalin kadakuada a nagsayaat a solusion para iti panagsalaysay iti estoria ken panagpasiar iti produkto. Dadduma a tattao ket napan bassit iti ngato iti daytoy, ngem no mausar a nasayaat, daytoy ket mabalin nga epektibo unay nga alikamen ti disenio, ken makatulong a mangikkat kadagiti biblioteka a kas ti: ScrollReveal, GSAP Scroll, wennoWOW.js. Dagiti Mapasayaat a Pili Ti maibagay a panagpili ket ti gagangay nga elemento ti

No spam. Join 138,000+ creators. Unsubscribe anytime.

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free