Antaŭ Ĉirkaŭ 15 jaroj, mi laboris ĉe kompanio, kie ni konstruis apojn por vojaĝagentoj, flughavenaj laboristoj kaj flugkompanioj. Ni ankaŭ konstruis nian propran endoman kadron por UI-komponentoj kaj unupaĝaj aplikaj kapabloj. Ni havis komponantojn por ĉio: kampoj, butonoj, langetoj, intervaloj, datumtabloj, menuoj, datumiloj, elektoj kaj multelektoj. Ni eĉ havis div-komponenton. Nia div-komponento estis bonega cetere, ĝi permesis al ni fari rondajn angulojn ĉe ĉiuj retumiloj, kio, kredu aŭ ne, ne estis facila afero tiutempe.
Nia laboro okazis en punkto de nia historio, kiam JS, Ajax kaj dinamika HTML estis rigardataj kiel revolucio, kiu venigis nin en la estontecon. Subite, ni povis ĝisdatigi paĝon dinamike, akiri datumojn de servilo kaj eviti devi navigi al aliaj paĝoj, kio estis vidita kiel malrapida kaj ekbrilis grandan blankan rektangulon sur la ekrano inter la du paĝoj. Ekzistis frazo, popularigita fare de Jeff Atwood (la fondinto de StackOverflow), kiu legis: "Ĉiu aplikaĵo, kiu povas esti skribita en JavaScript, estos eventuale skribita en JavaScript." - Jeff Atwood
Al ni tiutempe, ĉi tio sentis kuraĝon iri kaj krei tiujn programojn. Ĝi sentis kiel ĝenerala aprobo fari ĉion kun JS. Do ni faris ĉion kun JS, kaj ni ne vere prenis la tempon por esplori aliajn manierojn fari aferojn. Ni ne vere sentis la instigon ĝuste lerni kion HTML kaj CSS povus fari. Ni ne vere perceptis la retejon kiel evoluanta aplika platformo en ĝia tuteco. Ni plejparte vidis ĝin kiel io, kion ni bezonis prilabori, precipe se temas pri retumila subteno. Ni povus simple ĵeti pli da JS al ĝi por fari aferojn. Ĉu preni la tempon por lerni pli pri kiel la retejo funkciis kaj kio estis havebla sur la platformo helpis min? Certe, mi verŝajne povus razi amason da kodoj, kiuj ne estis vere bezonataj. Sed, tiutempe, eble ne tiom. Vi vidas, retumila diferencoj estis sufiĉe gravaj tiam. Tio estis tempo kiam Interreto Explorer daŭre estis la domina retumilo, kie Firefox estas la proksima dua, sed komencanta perdi merkatparton pro Chrome rapide akiranta popularecon. Kvankam Chrome kaj Fajrovulpo sufiĉe bone konsentis pri TTT-normoj, la medioj en kiuj niaj programoj funkciis signifis, ke ni devis subteni IE6 dum longa tempo. Eĉ kiam ni rajtis subteni IE8, ni ankoraŭ devis trakti multajn diferencojn inter retumiloj. Ne nur tio, sed la tiama reto simple ne havis tiom da kapabloj enkonstruitaj ĝuste en la platformon.
Rapide antaŭen ĝis hodiaŭ. Aferoj ege ŝanĝiĝis. Ne nur ni havas pli da ĉi tiuj kapabloj ol iam ajn antaŭe, sed la rapideco je kiu ili fariĝas disponeblaj pliiĝis ankaŭ. Mi do denove demandi la demandon: Ĉu preni la tempon por lerni pli pri kiel funkcias la reto kaj kio estas disponebla en la platformo helpus vin hodiaŭ? Absolute jes. Lerni kompreni kaj uzi la retplatformon hodiaŭ metas vin je grandega avantaĝo super aliaj programistoj. Ĉu vi laboras pri rendimento, alirebleco, respondemo, ĉiuj ili kune, aŭ nur sendado de UI-funkcioj, se vi volas fari ĝin kiel respondeca inĝeniero, koni la ilojn disponeblajn por vi helpas vin atingi viajn celojn pli rapide kaj pli bone. Kelkaj Aferoj Por Vi Eble Ne Plu Bezonas Bibliotekon Sciante, kiujn retumiloj subtenas hodiaŭ, la demando do estas: Kion ni povas forlasi? Ĉu ni bezonas div-komponenton por fari rondigitajn angulojn en 2025? Kompreneble, ni ne faras. La landlima radiuso estas subtenata de ĉiuj nuntempe uzataj retumiloj dum pli ol 15 jaroj ĉe ĉi tiu punkto. Kaj anguloforma ankaŭ baldaŭ venos, por eĉ pli ŝatataj anguloj. Ni rigardu relative lastatempajn funkciojn, kiuj nun disponeblas en ĉiuj ĉefaj retumiloj, kaj kiujn vi povas uzi por anstataŭigi ekzistantajn dependecojn en via kodbazo. La afero ne estas tuj forĵeti ĉiujn viajn amatajn bibliotekojn kaj reverki vian kodbazon. Pri ĉio alia, vi devos unue konsideri retumilon kaj decidi laŭ aliaj faktoroj specifaj por via projekto. La sekvaj funkcioj estas efektivigitaj en la tri ĉefaj retumiloj (Chromium, WebKit kaj Gecko), sed vi eble havas malsamajn retumilsubtenajn postulojn, kiuj malhelpas vin uzi ilin tuj. Nun ankoraŭ estas bona tempo por lerni pri ĉi tiuj funkcioj, kaj eble plani uzi ilin iam. Popovers Kaj Dialogoj La Popover API, la HTML-elemento
Certe, via interreta konekto rapideco ankaŭ pliiĝis, sed tio ne estas la kazo por ĉiuj. Kaj ankaŭ ne ĉiuj havas la samajn aparatkapablojn. Entiri triapartan kodon por aferoj, kiujn vi povas fari per la platformo, anstataŭe, plej verŝajne signifas, ke vi sendas pli da kodo, kaj tial atingas malpli da klientoj ol vi kutime farus. En la reto, malbona ŝarĝa rendimento kondukas al grandaj forlasoprocentoj kaj vundas la markreputacion. Kurante Malpli Kodon Sur Aparatoj Krome, la kodo, kiun vi sendas sur la aparatoj de viaj klientoj, verŝajne funkcias pli rapide se ĝi uzas malpli da JavaScript abstraktaĵoj sur la platformo. Ĝi ankaŭ verŝajne estas pli respondema kaj pli alirebla defaŭlte. Ĉio ĉi kondukas al pli kaj pli feliĉaj klientoj. Kontrolu la blogon de mia kolego Alex Russell ĉiujaran rendimentan malegalecon, kiu montras, ke altkvalitaj aparatoj plejparte forestas de merkatoj kun miliardoj da uzantoj pro riĉa malegaleco. Kaj ĉi tiu breĉo nur kreskas kun la tempo.
Enkonstruita Masonería Aranĝo Unu retplatformo, kiu baldaŭ venos kaj pri kiu mi tre entuziasmas, estas CSS-Masonaĵo.
Mi komencu klarigante kio estas Masonismo. Kio Estas Masonería Masonaĵo estas speco de aranĝo popularigita de Pinterest antaŭ jaroj. Ĝi kreas sendependajn spurojn de enhavo ene de kiuj eroj pakas sin kiel eble plej proksime al la komenco de la trako.
Multaj homoj vidas Masonerían kiel bonegan eblon por biletujoj kaj fotogalerioj, kion ĝi certe povas fari. Sed Masonería estas pli fleksebla ol tio, kion vi vidas sur Pinterest, kaj ĝi ne estas limigita al nur akvofalaj aranĝoj. En masonaĵa aranĝo:
Trakoj povas esti kolumnoj aŭ vicoj:
Spuroj de enhavo ne ĉiuj devas esti samgrandaj:
Eroj povas enhavi plurajn trakojn:
Eroj povas esti metitaj sur specifajn spurojn; ili ne devas ĉiam sekvi la aŭtomatan lokigoritmon:
Demonstraĵoj Jen kelkaj simplaj pruvoj, kiujn mi faris uzante la venontan efektivigon de CSS Masonry en Chromium. Demonstraĵo de fotogalerio, montranta kiel eroj (la titolo ĉi-kaze) povas etendi plurajn trakojn:
Alia fotogalerio montranta trakojn de malsamaj grandecoj:
Novaĵreteja aranĝo kun kelkaj trakoj pli larĝaj ol aliaj, kaj kelkaj eroj enhavantaj la tutan larĝon de la aranĝo:
Kanban tabulo montranta ke eroj povas esti metitaj sur specifajn trakojn:
Notu: Laantaŭaj demonstraĵoj estis faritaj per versio de Chromium, kiu ankoraŭ ne disponeblas por la plej multaj retuzantoj, ĉar CSS Masonry ĵus komencas esti efektivigita en retumiloj. Tamen, retejo-programistoj jam feliĉe uzas bibliotekojn por krei Masonry-aranĝojn jam de jaroj. Ejoj Uzantaj Masonaĵon Hodiaŭ Efektive, masonismo estas sufiĉe ofta en la reto hodiaŭ. Jen kelkaj ekzemploj, kiujn mi trovis krom Pinterest:
Kaj kelkaj pliaj, malpli evidentaj, ekzemploj:
Do, kiel ĉi tiuj aranĝoj estis kreitaj? Solvoj Unu lertaĵo, kiun mi vidis uzi, estas uzi Flexbox-aranĝon anstataŭe, ŝanĝante ĝian direkton al kolumno kaj agordi ĝin por envolvi. Tiel, vi povas meti erojn de malsamaj altecoj en plurajn, sendependajn kolumnojn, donante la impreson de Masonería-aranĝo:
Estas tamen du limigoj kun ĉi tiu solvo:
La ordo de eroj estas malsama ol tio, kion ĝi estus kun vera Masonería-aranĝo. Kun Flexbox, eroj unue plenigas la unuan kolumnon kaj, kiam ĝi estas plena, tiam iru al la sekva kolumno. Kun Masonaĵo, eroj stakus en kiu ajn trako (aŭ kolono en ĉi tiu kazo) havas pli da spaco disponebla. Sed ankaŭ, kaj eble pli grave, ĉi tiu solvo postulas, ke vi agordu fiksan altecon al la Flexbox-ujo; alie, neniu envolviĝo okazus.
Triapartaj Masonistaj Bibliotekoj Por pli progresintaj kazoj, programistoj uzis bibliotekojn. La plej konata kaj populara biblioteko por tio estas simple nomita Masonería, kaj ĝi estas elŝutita ĉirkaŭ 200,000 fojojn semajne laŭ NPM. Squarespace ankaŭ provizas aranĝan komponanton, kiu prezentas Masonry-aranĝon, por senkoda alternativo, kaj multaj retejoj uzas ĝin. Ambaŭ ĉi tiuj opcioj uzas JavaScript-kodon por meti erojn en la aranĝon. Enkonstruita Masonaĵo Mi vere ĝojas, ke Masonería nun komencas aperi en retumiloj kiel enkonstruita CSS-trajto. Kun la tempo, vi povos uzi Masonry same kiel vi faras Grid aŭ Flexbox, tio estas, sen bezoni ajnajn solvojn aŭ triapartan kodon. Mia teamo ĉe Microsoft efektivigis enkonstruitan Masonry-subtenon en la malfermfonta projekto Chromium, sur kiu baziĝas Edge, Chrome kaj multaj aliaj retumiloj. Mozilla estis fakte la unua retumila vendisto kiu proponis eksperimentan efektivigon de Masonry jam en 2020. Kaj Apple ankaŭ estis tre interesita pri igi ĉi tiun novan retan aranĝon primitiva okazi. La laboro por normigi la funkcion ankaŭ antaŭeniras, kun interkonsento ene de la CSS-laborgrupo pri la ĝenerala direkto kaj eĉ nova ekrantipa ekrano: krado-lenoj. Se vi volas lerni pli pri Masonería kaj spuri progreson, rigardu mian paĝon pri rimedoj de CSS Masonry. Kun la tempo, kiam Masonería fariĝos Bazlinia funkcio, same kiel Grid aŭ Flexbox, ni povos simple uzi ĝin kaj profiti el:
Pli bona agado, Pli bona respondeco, Facileco de uzo kaj pli simpla kodo.
Ni rigardu ĉi tiujn pli detale. Pli bona Agado Fari vian propran Mason-similan aranĝan sistemon, aŭ uzi trian bibliotekon anstataŭe, signifas, ke vi devos ruli JavaScript-kodon por meti erojn sur la ekranon. Ĉi tio ankaŭ signifas, ke ĉi tiu kodo estos renderblokado. Efektive, aŭ nenio aperos, aŭ aferoj ne estos en la ĝustaj lokoj aŭ de la ĝustaj grandecoj, ĝis tiu JavaScript-kodo estos rulita. Masonaĵa aranĝo estas ofte uzata por la ĉefa parto de retpaĝo, kio signifas, ke la kodo aperus vian ĉefan enhavon pli malfrue ol ĝi alie povus havi, malbonigante vian LCP, aŭ Plej Granda Contentful Paint-metriko, kiu ludas grandan rolon en perceptita rendimento kaj serĉilo-optimumigo. Mi testis la bibliotekon Masonry JS per simpla aranĝo kaj simulante malrapidan 4G-konekton en DevTools. La biblioteko ne estas tre granda (24KB, 7.8KB gzipped), sed necesis 600ms por ŝargi sub miaj testaj kondiĉoj. Jen prezentoregistraĵo montranta tiun longan ŝarĝan tempon de 600ms por la Masonry-biblioteko, kaj ke neniu alia bildiga agado okazis dum tio okazis:
Krome, post la komenca ŝarĝotempo, la elŝutita skripto tiam bezonis esti analizita, kompilita, kaj poste ruliĝi. Ĉio el tio, kiel menciite antaŭe, blokis la bildigon de la paĝo. Kun enkonstruita Masonry-efektivigo en la retumilo, ni ne havos skripton por ŝargi kaj ruli. La retumilo nur faros sian aferon dum la komenca paĝa bildigo. Pli bona Respondeco Simile al kiam paĝo unue ŝarĝas, regrandigi la retumilon kondukas al bildigo de la aranĝo en tiu paĝo denove. Tamen ĉe ĉi tiu punkto, se la paĝo uzas la bibliotekon Masonry JS, ne necesas denove ŝargi la skripton, ĉar ĝi jam estasĉi tie. Tamen, la kodo, kiu movas erojn en la ĝustaj lokoj, devas funkcii. Nun ĉi tiu aparta biblioteko ŝajnas sufiĉe rapida fari tion kiam la paĝo ŝargas. Tamen, ĝi animas la erojn kiam ili devas moviĝi al malsama loko sur fenestro regrandigo, kaj ĉi tio faras grandan diferencon. Kompreneble, uzantoj ne pasigas tempon regrandigi siajn foliumilojn tiom kiom ni programistoj. Sed ĉi tiu vigla regrandigo-sperto povas esti sufiĉe ĝena kaj aldonas al la perceptita tempo necesa por la paĝo adaptiĝi al sia nova grandeco. Facileco de Uzo Kaj Pli Simpla Kodo Kiom facile estas uzi retan funkcion kaj kiom simpla aspektas la kodo estas gravaj faktoroj, kiuj povas fari grandan diferencon por via teamo. Ili neniam povas esti tiel gravaj kiel la fina uzantsperto, kompreneble, sed la sperto de programisto efikas pri konservebleco. Uzado de enkonstruita interreta funkcio venas kun gravaj avantaĝoj tiuflanke:
Programistoj, kiuj jam konas HTML, CSS kaj JS, plej verŝajne povos uzi tiun funkcion facile, ĉar ĝi estas desegnita por bone integriĝi kaj esti konsekvenca kun la resto de la retejo. Ne riskas rompi ŝanĝojn en la maniero kiel la funkcio estas uzata. Estas preskaŭ nula risko, ke tiu funkcio iĝu malrekomendita aŭ neprizorgita.
En la kazo de enkonstruita Masonería, ĉar ĝi estas aranĝo primitivo, vi uzas ĝin de CSS, same kiel Grid aŭ Flexbox, neniu JS implikita. Ankaŭ aliaj CSS-ecoj rilataj al aranĝo, kiel breĉo, funkcias kiel vi atendus ilin. Ne estas lertaĵoj aŭ solvoj por scii, kaj la aferoj, kiujn vi lernas, estas dokumentitaj en MDN. Por la Masonry JS-lib, inicialigo estas iom kompleksa: ĝi postulas datuman atributon kun specifa sintakso, kune kun kaŝitaj HTML-elementoj por agordi la kolumnojn kaj interspacojn. Krome, se vi volas etendi kolumnojn, vi devas mem inkluzivi la breĉon por eviti problemojn:
Ni komparu ĉi tion al kiel aspektus enkonstruita Masonry-efektivigo:
Pli simpla, pli kompakta kodo, kiu nur povas uzi aferojn kiel interspacon kaj kie kovrantaj trakoj estas farita kun span 2, same kiel en krado, kaj ne postulas, ke vi kalkulu la ĝustan larĝon, kiu inkluzivas la breĉon. Kiel Scii Kio Estas Disponebla Kaj Kiam Ĝi Estas Disponebla? Ĝenerale, la demando ne vere estas ĉu vi devus uzi enkonstruitan Masonaĵon super JS-biblioteko, sed prefere kiam. La Masonry JS-biblioteko estas mirinda kaj plenigas mankon en la retejo platformo dum multaj jaroj, kaj por multaj feliĉaj programistoj kaj uzantoj. Ĝi havas kelkajn malavantaĝojn se vi komparas ĝin kun enkonstruita Masonería efektivigo, kompreneble, sed tiuj ne gravas se tiu efektivigo ne estas preta. Estas facile por mi listigi ĉi tiujn bonegajn novajn retplatformojn ĉar mi laboras ĉe retumila vendisto, kaj mi tial emas scii kio venas. Sed programistoj ofte dividas, enketo post enketo, ke konservi trakon de novaj aferoj estas malfacile. Resti informita estas malfacila, kaj kompanioj ne ĉiam prioritatas lernadon ĉiukaze. Por helpi ĉi tion, jen kelkaj rimedoj, kiuj provizas ĝisdatigojn en simplaj kaj kompaktaj manieroj, por ke vi rapide ricevu la informojn, kiujn vi bezonas:
La retejo-platformo havas esplorejon: Vi eble interesiĝos pri ĝia paĝo pri eldonaj notoj. Kaj, se vi ŝatas RSS, rigardu la eldonajn notojn, same kiel la Bazliniajn Nove Disponeblajn kaj Vaste Disponeblajn.
La RetoPlatformo-Statusa panelo: Vi eble ŝatos ĝiajn diversajn Bazajn jarpaĝojn.
La vojmapa paĝo de Chrome Platform Status.
Se vi havas iom pli da tempo, vi eble ankaŭ interesiĝos pri eldonaj notoj de retumiloj:
Chrome Rando Fajrovulpo Safaro
Por eĉ pli da rimedoj, kontrolu mian Trompfolion Navigado de la Reta Platformo. Mia Aĵo Ankoraŭ Ne Efektivigita Tio estas la alia flanko de la problemo. Eĉ se vi trovas la tempon, energion kaj manierojn konservi trakon, ankoraŭ estas frustriĝo aŭdigi vian voĉon kaj efektivigi viajn plej ŝatatajn funkciojn. Eble vi atendis dum jaroj ke specifa cimo estu solvita, aŭ specifan funkcion por sendi en retumilo kie ĝi ankoraŭ mankas. Kion mi diros, ke vendistoj de retumilo aŭskultas. Mi estas parto de pluraj trans-organizaj teamoj, kie ni diskutas pri signaloj de programistoj kaj sugestoj la tutan tempon. Ni rigardas multajn malsamajn fontojn de sugestoj, ambaŭ internaj ĉe ĉiu retumila vendisto kaj eksteraj/publikaj en forumoj, malfermfontaj projektoj, blogoj kaj enketoj. Kaj ni ĉiam provas krei pli bonajn manierojn por programistoj dividi siajn specifajn bezonojn kaj uzkazojn. Do, se vi povas, bonvolu postuli pli de retumiloj kaj premu nin por efektivigi la funkciojn, kiujn vi bezonas. Mi komprenas, ke ĝi bezonas tempon, kaj ankaŭ povas esti timiga (por ne mencii altan baron al eniro), sed ĝi ankaŭ funkcias. Jen kelkaj manieroj, kiel vi povas aŭdigi vian (aŭ vian kompanion) voĉon: Prenu la ĉiujarajn enketojn pri Ŝtato de JS, Ŝtato de CSS kaj Ŝtato de HTML. Ili ludas grandan rolon en kiel retumila vendistoj prioritatas sian laboron. Se vi bezonas specifan norm-bazitan API por esti efektivigita konstante tra retumiloj, konsideru sendi proponon ĉe la sekva ripeto de la projekto Interop. Ĝi postulas pli da tempo, sed konsideru kiel Shopify kaj RUMvision dividis siajn dezirlistojn por Interop 2026. Detalaj informoj kiel ĉi tiu povas esti tre utila por retumila vendistoj por prioritati. Por pli utilaj ligiloj por influi foliumilojn, rigardu mian Trompfolion Navigating the Web Platform. Konkludo Por fermi, mi esperas, ke ĉi tiu artikolo lasis al vi kelkajn aferojn pri kiuj pensi:
Ekscito por Masonería kaj aliaj venontaj interretaj funkcioj. Kelkajn retajn funkciojn, kiujn vi eble volas komenci uzi. Kelkajn pecojn de kutima aŭ triaparta kodo, kiujn vi eble povos forigi en favoro de enkonstruitaj funkcioj. Kelkaj manieroj konservi trakon de kio venos kaj influi retumilon vendistojn.
Pli grave, mi esperas, ke mi konvinkis vin pri la avantaĝoj de uzado de la retejo-platformo ĝis ĝia plena potencialo.
