Madwar 15-il sena ilu, kont qed naħdem f'kumpanija fejn bnejna apps għal aġenti tal-ivvjaġġar, ħaddiema tal-ajruport, u kumpaniji tal-linji tal-ajru. Bnejna wkoll il-qafas intern tagħna stess għall-komponenti tal-UI u l-kapaċitajiet tal-app b'paġna waħda. Kellna komponenti għal kollox: oqsma, buttuni, tabs, firxiet, datatables, menus, datapickers, selezzjonijiet, u multiselects. Saħansitra kellna komponent div. Il-komponent div tagħna kien kbir mill-mod, ippermettilna nagħmlu kantunieri fit-tond fuq il-browsers kollha, li, temminha jew le, ma kinitx ħaġa faċli li tagħmel dak iż-żmien.

Ix-xogħol tagħna seħħ f'punt fl-istorja tagħna meta JS, Ajax, u HTML dinamiku tqiesu bħala rivoluzzjoni li wasslitna fil-futur. F'daqqa waħda, nistgħu naġġornaw paġna b'mod dinamiku, niksbu dejta minn server, u nevitaw li jkollna nnavigaw għal paġni oħra, li kien meqjus bħala bil-mod u flashed rettangolu abjad kbir fuq l-iskrin bejn iż-żewġ paġni. Kien hemm frażi, magħmula popolari minn Jeff Atwood (il-fundatur ta 'StackOverflow), li kienet tgħid: “Kull applikazzjoni li tista’ tinkiteb bil-JavaScript eventwalment tinkiteb bil-JavaScript.”— Jeff Atwood

Għalina dak iż-żmien, dan ħassejtni qisu dare li fil-fatt mmorru u noħolqu dawk l-apps. Ħassejt approvazzjoni ġenerali biex tagħmel kollox ma 'JS. Allura għamilna kollox ma 'JS, u ma tantx ħadna l-ħin biex nirriċerkaw modi oħra ta' kif nagħmlu l-affarijiet. Aħna ma tantx ħassejna l-inċentiv biex nitgħallmu sewwa x'jistgħu jagħmlu HTML u CSS. Aħna ma tantx ħassejna l-web bħala pjattaforma tal-app li qed tevolvi fl-intier tagħha. L-aktar rajniha bħala xi ħaġa li għandna bżonn naħdmu, speċjalment fejn tidħol l-appoġġ tal-browser. Nistgħu biss tarmi aktar JS lejha biex inwettqu l-affarijiet. Jgħinni li tieħu l-ħin biex nitgħallem aktar dwar kif ħadmet il-web u dak li kien disponibbli fuq il-pjattaforma? Żgur, stajt probabbilment imqaxxar mazz ta 'kodiċi li ma kienx verament meħtieġ. Iżda, dak iż-żmien, forsi mhux daqshekk. Tara, id-differenzi fil-browser kienu pjuttost sinifikanti dakinhar. Dan kien żmien meta l-Internet Explorer kien għadu l-browser dominanti, b'Firefox kien it-tieni qrib, iżda beda jitlef is-sehem mis-suq minħabba li Chrome malajr kiseb popolarità. Għalkemm Chrome u Firefox kienu pjuttost tajbin biex jaqblu dwar standards tal-web, l-ambjenti li fihom kienu qed jaħdmu l-apps tagħna kien ifisser li kellna nappoġġjaw IE6 għal żmien twil. Anke meta tħallew nappoġġjaw IE8, xorta kellna nittrattaw ma 'ħafna differenzi bejn il-browsers. Mhux dan biss, iżda l-web ta 'dak iż-żmien sempliċement ma kellhiex daqshekk kapaċitajiet mibnija dritt fil-pjattaforma.

Il-quddiem malajr sal-lum. L-affarijiet inbidlu bil-kbir. Mhux biss għandna aktar minn qatt qabel minn dawn il-kapaċitajiet, iżda r-rata li biha jsiru disponibbli żdiedet ukoll. Ħa nagħmel il-mistoqsija mill-ġdid, imbagħad: Tgħinek illum biex tieħu l-ħin biex titgħallem aktar dwar kif taħdem il-web u x'inhu disponibbli fuq il-pjattaforma? Assolutament iva. Li titgħallem tifhem u tuża l-pjattaforma tal-web illum tpoġġik f'vantaġġ kbir fuq żviluppaturi oħra. Kemm jekk taħdem fuq il-prestazzjoni, l-aċċessibbiltà, ir-rispons, kollha flimkien, jew sempliċement tbaħħir karatteristiċi tal-UI, jekk trid tagħmel dan bħala inġinier responsabbli, li tkun taf l-għodod li huma disponibbli għalik jgħinek tilħaq il-miri tiegħek aktar malajr u aħjar. Xi Affarijiet Inti Jista' Ma Jkollokx Bżonn Għalihom Librerija Meta nkunu nafu x'jappoġġjaw il-browsers illum, il-mistoqsija, allura, hija: X'nistgħu nħallu? Għandna bżonn komponent div biex nagħmlu kantunieri fit-tond fl-2025? Naturalment, aħna le. Il-proprjetà tar-raġġ tal-fruntiera ilha appoġġjata mill-browsers kollha użati bħalissa għal aktar minn 15-il sena f'dan il-punt. U l-forma tal-kantuniera hija wkoll li ġejja dalwaqt, għal kantunieri anke fancier. Ejja nagħtu ħarsa lejn karatteristiċi relattivament reċenti li issa huma disponibbli fil-browsers ewlenin kollha, u li tista 'tuża biex tissostitwixxi d-dipendenzi eżistenti fil-codebase tiegħek. Il-punt mhuwiex li immedjatament ditch libreriji kollha għeżież tiegħek u tikteb mill-ġdid codebase tiegħek. Fir-rigward ta 'kull ħaġa oħra, ser ikollok bżonn tieħu kont tal-appoġġ tal-browser l-ewwel u tiddeċiedi abbażi ta' fatturi oħra speċifiċi għall-proġett tiegħek. Il-karatteristiċi li ġejjin huma implimentati fit-tliet magni ewlenin tal-brawżer (Chromium, WebKit, u Gecko), iżda jista 'jkollok rekwiżiti differenti ta' appoġġ għall-brawżer li jipprevjenuk milli tużahom minnufih. Madankollu, issa għadu żmien tajjeb biex titgħallem dwar dawn il-karatteristiċi, u forsi tippjana li tużahom f'xi punt. Popovers U Djalogi L-API Popover, l-element HTML

, u l-psewdo-element ::backdrop jistgħu jgħinuk teħles mid-dipendenzi fuq il-popup,tooltip, u libreriji tad-djalogu, bħal Floating UI, Tippy.js, Tether, jew React Tooltip. Huma jimmaniġġjaw l-aċċessibbiltà u l-ġestjoni tal-fokus għalik, barra mill-kaxxa, huma customizable ħafna billi tuża CSS, u jistgħu faċilment jiġu animati. Accordions L-element
, l-attribut tal-isem tiegħu għal elementi reċiprokament esklussivi, u l-psewdo-element ::details-content ineħħu l-ħtieġa għal komponenti tal-accordion bħall-Bootstrap Accordion jew il-komponent React Accordion. L-użu tal-pjattaforma hawnhekk ifisser li huwa aktar faċli għal nies li jafu HTML/CSS biex jifhmu l-kodiċi tiegħek mingħajr ma jkollhom l-ewwel jitgħallmu jużaw librerija speċifika. Ifisser ukoll li int immuni għat-tkissir tal-bidliet fil-librerija jew it-twaqqif ta’ dik il-librerija. U, ovvjament, dan ifisser inqas kodiċi biex tniżżel u tħaddem. Elementi ta' dettalji esklussivi reċiprokament m'għandhomx bżonn JS biex jiftħu, jagħlqu jew janimaw. Sintassi CSS Saffi ta' kaskata, għal codebase CSS aktar organizzat, nesting CSS, għal CSS aktar kompatti, funzjonijiet ġodda tal-kulur, kuluri relattivi u taħlita ta' kuluri, funzjonijiet ġodda tal-Matematika bħal abs(), sign(), pow() u oħrajn jgħinu biex jitnaqqsu d-dipendenzi fuq CSS pre-proċessuri, libreriji ta' utilità bħal Bootstrap u Tailwind, jew saħansitra libreriji CSS-in-JS runtime. Il-logħba changer :has(), waħda mill-aktar karatteristiċi mitluba għal żmien twil, tneħħi l-ħtieġa għal soluzzjonijiet aktar ikkumplikati bbażati fuq JS. JS Utilitajiet Metodi Modern Array bħal findLast(), jew at(), kif ukoll metodi Set bħal differenza(), intersezzjoni(), union() u oħrajn jistgħu jnaqqsu d-dipendenzi fuq libreriji bħal Lodash. Mistoqsijiet dwar Kontenituri Mistoqsijiet tal-kontenituri jagħmlu l-komponenti tal-UI jirrispondu għal affarijiet oħra għajr id-daqs tal-vetrina, u għalhekk jagħmluhom aktar li jistgħu jerġgħu jintużaw f'kuntesti differenti. M'għadx hemm bżonn li tuża librerija UI ta' JS-heavy għal dan, u lanqas m'hemmx għalfejn tuża polyfill. Tqassim Grid, subgrid, flexbox, jew multi-kolonna ilhom madwar għal żmien twil issa, iżda meta wieħed iħares lejn ir-riżultati tal-istħarriġ tal-Istat tas-CSS, huwa ċar li l-iżviluppaturi għandhom tendenza li jkunu kawti ħafna meta jadottaw affarijiet ġodda, u jistennew għal żmien twil ħafna qabel ma jagħmlu. Dawn il-karatteristiċi ilhom Baseline għal żmien twil u tista 'tużahom biex teħles mid-dipendenzi fuq affarijiet bħas-sistema tal-grilja tal-Bootstrap, l-utilitajiet tal-flexbox tal-Qafas tal-Fondazzjoni, il-grilja fissa Bulma, il-grilja Materialize, jew il-kolonni Tailwind. Mhux qed ngħid li għandek tneħħi l-qafas tiegħek. It-tim tiegħek adottaha għal raġuni, u t-tneħħija tista 'tkun proġett kbir. Iżda meta wieħed iħares lejn dak li l-pjattaforma tal-web tista 'toffri mingħajr tgeżwir ta' parti terza fuq nett tiġi b'ħafna benefiċċji. Affarijiet Li Jista' Ma Jkollokx Bżonn Iktar Fil-Futur Qarib Issa, ejja nagħtu ħarsa malajr lejn xi wħud mill-affarijiet li ma jkollokx bżonn ta’ librerija għalihom fil-futur qarib. Jiġifieri, l-affarijiet hawn taħt mhumiex lesti għal adozzjoni tal-massa, iżda li tkun konxju minnhom u l-ippjanar għal użu potenzjali aktar tard jista 'jkun ta' għajnuna. Pożizzjonament tal-Ankra Il-pożizzjonament tal-ankra CSS jimmaniġġja l-ippożizzjonar tal-popovers u t-tooltips relattiv għal elementi oħra, u jieħu ħsieb li jżommhom fil-vista, anke meta tiċċaqlaq, tiskrollja, jew tibdel id-daqs tal-paġna. Dan huwa komplement kbir għall-API Popover imsemmija qabel, li jagħmilha saħansitra aktar faċli biex temigra minn soluzzjonijiet JS aktar intensivi fil-prestazzjoni. Navigazzjoni API L-API tan-Navigazzjoni tista 'tintuża biex timmaniġġja n-navigazzjoni f'apps ta' paġna waħda u tista 'tkun komplement kbir, jew saħansitra sostitut, għal React Router, routing Next.js, jew kompiti Angular routing. Ara Transitions API Il-View Transitions API jista' janima bejn l-istati differenti ta' paġna. Fuq applikazzjoni ta’ paġna waħda, dan jagħmel transizzjonijiet bla xkiel bejn l-istati faċli ħafna, u jista’ jgħinek teħles minn libreriji ta’ animazzjoni bħal Anime.js, GSAP jew Motion.dev. Saħansitra aħjar, l-API tista 'tintuża wkoll ma' applikazzjonijiet ta 'paġni multipli. Ftakar qabel, meta għidt li r-raġuni li bnejna apps b'paġna waħda fil-kumpanija fejn ħdimt 15-il sena ilu kienet biex nevitaw il-flash abjad ta' reloads tal-paġni meta nnavigaw? Kieku dik l-API kienet disponibbli dak iż-żmien, konna nkunu nistgħu niksbu effetti sbieħ ta’ transizzjoni tal-paġna mingħajr qafas ta’ paġna waħda u mingħajr tniżżil inizjali enormi tal-app kollha. Animazzjonijiet mmexxija mill-iscroll L-animazzjonijiet mmexxija mill-iscroll jimxu fuq il-pożizzjoni tal-iscroll tal-utent, aktar milli maż-żmien, u jagħmluhom soluzzjoni kbira għall-istejjer u t-tours tal-prodotti. Xi nies marru xi ftit fuq il-quċċata magħha, iżda meta użata tajjeb, din tista 'tkun għodda ta' disinn effettiva ħafna, u tista 'tgħin biex teħles minn libreriji bħal: ScrollReveal, GSAP Scroll, jewAra naqra.js. Agħżel Customizable Selezzjoni personalizzabbli hija element

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

Create Your Free Bio Page

Join 138,000+ creators on Seemless.

Get Started Free