Tapahtuma erillään 2022 Denver loppuun eilen. Ja vaikka en tällä kertaa päässyt kaikkiin kolmeen päivään, sain kiinni eilisestä toiminnasta – ja niin se oli mahtava. En ole kovin sosiaalinen tai ulospäinsuuntautunut, mutta tämä oli ensimmäinen konferenssi, jossa olen käynyt ainakin pariin vuoteen, ja ihmisten näkeminen henkilökohtaisesti oli uskomattoman virkistävää.
Tein tietysti muistiinpanoja! Ajattelin julkaista ne tänne, koska jakaminen on välittämistä. Ainakin näin kuusivuotias kertoi minulle toissapäivänä pyydessään palaa jälkiruokaani eilen illalla.
Erotan tämän kaiuttimen mukaan. Reilu varoitus: Pidän käsinkirjoitetuista muistiinpanoista ja melko visuaalisesta kaverista, joten muistiinpanoni ovat yleensä vähemmän… jäsenneltyjä kuin useimmat. Ja nämä muistiinpanot ovat vain asioita, jotka jäivät mieleeni. Ne eivät ehkä ole edes esittäjän pääidea, mutta kiinnittivät huomioni!
Chris Coyier: Verkkosivustot ovat nyt hyviä
Chris on pitänyt tämän puheen aiemmin (liitimme sen yhteen juuri viime viikolla), mutta tällä kertaa laajensi sitä huomattavasti, erityisesti yksityiskohdista kontin suhteelliset yksiköt johon yhdistettynä clamp(), varmistavat tarkemman vasteen, koska arvot ovat suhteessa säilöön eikä näkymäporttiin. Tiedät siis, kuinka usein käytämme näkymän leveyttä (vh) yksikköä nestetyypille?
font-size: clamp(1rem, 1rem + 2vw, 2rem);No, voimme käyttää konttisuhteellista yksikköä, kuten säilökysely inline-size (cqi) sen sijaan missä 1cqi on yhtä suuri kuin 1 % säilön rivin koosta (tässä luonnos siitä):
font-size: clamp(1rem, 1rem + 1cqi, 2rem);Chris puhui myös melko vähän suorituskyvyn eduista hosting reunalla. Ei varmaan mikään yllätys, koska hän on kirjallinen siitä tätä useammin kuin muutaman kerran. Vaikka joku, joka oli jo lukenut nuo artikkelit, en rehellisesti sanottuna ymmärtänyt koko tietojenkäsittelyn käsitettä reunalla.
Idea on petollisen yksinkertainen: globaalit CDN:t voivat palvella varat nopeasti, koska ne isännöivät niitä maantieteellisesti lähellä käyttäjää. Se on melko tavallinen käytäntö rasterikuvien näyttämisessä. Mutta se on laajentunut staattisiin tiedostoihin, kuten samoihin HTML-, CSS- ja JavaScript-tiedostoihin, jotka käyttävät sivustoa – rakentaa ne etukäteen ja palvella jo koottuja ja optimoituja tiedostoja nopeasta maailmanlaajuisesta CDN:stä. Siinä koko Jamstack-konsepti!
Mutta entä jos tarvitset silti palvelinvastauksen siltä? Se ei ole kovin jännä, vai mitä? No, nyt meillä on käsittelijät, jotka pystyvät toimimaan yhdellä URL-osoitteella noutamaan tiedot etukäteen ja lisäämään ne ennen renderöintiä – suoraan CDN:stä. Toki taustalla tapahtuu ylimääräistä työtä. Silti se tosiasia, että voimme dynaamisesti noutaa dataa, syöttää sen, rakentaa sitä valmiiksi, palvella sitä staattisesti On Demand, ja sen ajaminen maantieteellisesti lähempänä käyttäjää tekee tästä räjähtävän nopean.
Tolu Adegbite: Kuinka voittaa ARIAssa ja vaikuttaa Webin saavutettavuuteen
Voi luoja, tämä oli loistava esitys! Tolu Adegbite koulutti minulle niin lujasti WAI-ARIAa, että minun oli vaikea kirjoittaa muistiin kaikkia hänen yhteisiä helmiä - Rooleja! osavaltioita! Merkinnät! Kuvaukset! Kaikki oli poikkeuksellisen hyvin katettu, ja asioita, joihin tiedän palaavani yhä uudelleen.
Mutta yksi erityinen asia, joka kiinnitti huomioni, on sisäänrakennetun SVG:n käytettävyys. Vaikka SVG liittyy muuntyyppisiin suunnitteluresursseihin, se, että se on päivän päätteeksi merkintä, erottaa sen muista, koska sitä ei aina tunnisteta kuvaksi.
Avustava tekniikka lukee todennäköisemmin upotetun SVG:n kuvana antamalla sille asianmukaisen esteettömän roolin ja tunnisteen:
Miriam Suzanne: Tärkeitä kerroksia
Hei, toinen CSS-Tricks-aluna! Miriam on käyttänyt paljon aikaa ja vaivaa Cascade Layers -määritys. Hän kirjoitti myös a iso opas niistä täällä CSS-Tricksissä ja puhuin niistä An Event Apartissa.
Minuun on jäänyt eniten kiinni, kuinka suuri henkinen muutos tämä on. Konsepti ei sinänsä ole monimutkainen. Julistaa @layer luettele tasot CSS-dokumentin yläosassa tarkkuuden mukaan ja kirjoita sitten tyylit kyseisiin tasoihin. Mutta minun kaltaiseni vanhalle dinosaurukselle, joka on kirjoittanut CSS:ää jonkin aikaa, minun on totuttava siihen, että Cascade Layers mahdollistaa yksinkertaisen luokan valitsimen päihittää jotain, jolla on yleensä korkeampi spesifisyys. kuin henkilöllisyystodistus.
🤯
Miriam muistutti myös huonetta siitä, että Cascade Layers ovat vain yksi työkalu, joka meillä on spesifisyydenhallintatyökaluvyössämme spesifisyyteen vaikuttavien valitsimien lisäksi (esim. :is(), :where()ja :has()).
Ja tämä on mielenkiintoinen pätkä. Kun Miriam käveli CSS:n spesifisyyden historian läpi, hän muisti sen !important Se suunniteltiin alun perin työkaluksi, jonka avulla käyttäjät voivat ohittaa käyttäjäagentin ja tekijän tyylit. Mutta jossain alapuolella olemme omaksuneet sen pakottaaksemme tekijätyylit huipulle. Cascade Layers auttaa poistamaan tekosyy täytyy käyttää !important koska ne antavat meille voiman "priorisoi tasot ja suojella perintöä"
Se on kauniisti sanottu, Miriam!
Dave Rupert: Esteettömyystilanteen poistaminen
Kuvittele, että heräät jonakin päivänä satoihin GitHub-ilmoituksiin sivustosi ilmoitetuista ongelmista. Mistä edes aloitat? Ehkä sulje kannettavasi ja hanki juurikanava sen sijaan? Niin kävi Davelle! Automaattinen esteettömyystarkastus palautti valtavan joukon virheitä ja määräsi ne Daven korjattavaksi.
Mutta hän huomasi kuvion otettuaan Excel-taulukon näistä ongelmista, siirtäen ne Notioniin paremman kuvan saamiseksi, piilottaen tarpeettomat sarakkeet, luokittelemalla kaiken ja näyttäessään tulokset loogisissa ryhmissä. Monet ilmoitetuista ongelmista olivat sama asia, joka toistui useilla sivuilla. Se, että automaattinen testi palauttaa kourallisen virheitä, ei tarkoita, että ne kaikki olisivat ainutlaatuisia. Tämä vähensi mukavan osan lipuista.
Hän jatkoi osoitti, kuinka - suhteellisen pienellä vaivalla - ongelmaruuhka väheni lähes 50 prosenttia.
Siellä on paljon pohdittavaa, etenkin työmme prosessoinnissa ja organisoinnissa. Suurin huomioni on se, kun Dave sanoi, että meidän on korostettava yksilöitä ja vuorovaikutusta prosessien ja työkalujen sijaan. Esteettömyysvirheiden etsimisen kaltaiset työkalut ovat hyödyllisiä, mutta ne eivät välttämättä kerro koko tarinaa. Sen sijaan, että otat heidän sanoihinsa, kannattaa kysyä kysymyksiä ja saada lisää kontekstia ennen kuin sukeltaa sotkuun.
Bonuksena asioiden uudelleenjärjestely Notionissa antoi Daven ryhmitellä ongelmat tavalla, joka osoittaa selvästi, mitä heikentymiä hänen tuotteensa aktiivisesti syrjii, mikä antoi hänelle enemmän empatiaa noihin laiminlyönteihin ja niiden priorisoimiseen.
Vielä yksi Hui Jing Chenin virtuaalinen istunto päätti päivän, mutta tosin missasin noin puolet siitä, koska kävin keskustelua käytävällä. Keskustelu kannatti, vaikka olenkin hämmentynyt, että missasin esityksen. Katson videon, kun se julkaistaan!
